فن آوری های کشیدن و رها کردن کشیدن و رها کردن: راهی برای دستکاری عناصر رابط کاربری. کد کامل جابجایی ماوس

استفاده از تکنولوژی کشیدن و انداختن (کشیدن و انداختن) به کاربر اجازه می دهد تا اشیاء مختلف را از یکی به دیگری منتقل کند، به عنوان مثال، عناصر یک لیست به لیست دیگر. برای انجام این کار، باید از دو کنترل استفاده کنید: یک سینک و یک منبع. گیرنده شیئی است که شی مبدأ (شیء متحرک) را دریافت می کند.

رویدادهایی که در حین حرکت اجسام رخ می دهند به ترتیبی که رخ می دهند در زیر فهرست شده اند.

OnStartDrag(نوع TStartDragEvent) - توسط شی منبع در ابتدای عملیات تولید می شود. پارامترهای ارسال شده به کنترل کننده رویداد: شی گیرنده DragObject (نوع TDragObject)، شی منبع (نوع TObject).

OnDragOver(نوع TDragOverEvent) - هنگامی که یک شیء شناور بالای آن قرار می گیرد یک شی هدف ایجاد می کند. پارامترهای ارسال شده به کنترل کننده رویداد: شی گیرنده فرستنده (نوع TObject)، شی منبع منبع (نوع TObject)، وضعیت حرکت وضعیت (نوع TDragState)، X و Y (نوع عدد صحیح) - مختصات فعلی اشاره گر ماوس، پذیرش (نوع بولی) ) علامت تایید عملیات جابجایی. وضعیت حرکت مشخص می کند که آیا جسم مورد حرکت در ناحیه گیرنده است یا خیر، آیا در آن حرکت می کند، آن را ترک کرده است. پارامترهای ارسال شده به شی گیرنده اجازه می دهد تا شی منبع را بپذیرد یا رد کند. اگر عملیات جابجایی پذیرفته شود، پارامتر Accept روی Trye و در غیر این صورت False تنظیم می شود.

onDragDrop (نوع TDragDropEvent) - هنگامی که شیء کشیده شده روی آن رها می شود توسط شی مقصد بالا می رود. به کنترل کننده رویداد مختصات فعلی اشاره گر ماوس، شی گیرنده فرستنده (نوع TObject) و شی حرکت منبع اصلی (نوع TObject) داده می شود.

onEndDrag (نوع EndDragEvent) - هنگامی که عملیات کشیدن به پایان می رسد، افزایش می یابد. مختصات X و Y نقطه ای که شی منبع فرستنده و شی گیرنده هدف به کنترل کننده رویداد ارسال می شود.

برای ایجاد کشیدن و رها کردن، کافی است دو رویداد را پیاده سازی کنید: OnDragDrop و OnDragOver با ویژگی DragMode که روی dmAutomatic تنظیم شده است. در غیر این صورت شروع عملیات جابجایی یعنی روش BeginDrag باید توسط برنامه نویس کدگذاری شود.

برای ادغام مواد، برنامه زیر را ایجاد می کنیم. یک جزء پنل را روی فرم قرار دهید. ویژگی DragMode Object Inspector را روی dmAutomatic قرار دهید. شی فرم را انتخاب کنید و از Object Inspector برای ایجاد رویدادهای زیر استفاده کنید:

رویه TForm1.FormDragOver(فرستنده، منبع: TObject؛ X، Y: عدد صحیح؛ حالت: TDragState؛ var Accept: Boolean); اگر Source = Panel1 شروع شود، سپس Accept:= True other Accept:= False; پایان؛ procedure TForm1.FormDragDrop(فرستنده، منبع: TObject; X، Y: عدد صحیح); BeginPanel1.Left:=X; Panel1.Top:=Y; پایان؛

حال با اجرای اپلیکیشن و فشردن دکمه ماوس روی پنل، می توانیم شی پنل را در سراسر فرم جابجا کنیم.

نتیجه گیری: ما با تکنولوژی آشنا شدیم کشیدن و انداختن(کشیدن و رها کردن) و در عمل از آن استفاده کرد.

گرفتن چیزی و گذاشتن آن آسان تر از نوشتن چیزی است که باید بردارید و در کجا قرار دهید. البته، بدون ماوس یا دستگاه مشابه، نمی‌توانید چیزی را انتخاب یا مشخص کنید، اما حتی در شرایط فعلی، استفاده از ایده کشیدن و رها کردن بسیار طبیعی و راحت است.

دامنه این ایده فقط فروشگاه های آنلاین نیست، کتابخانه های دیجیتال، جستجو یا سیستم های اطلاعاتی، بلکه منطقه اعمال شده است. این ایده در توسعه سایت ها و عناصر آنها بسیار کاربردی است که به صورت تعاملی و بدون مشارکت برنامه نویس ایجاد و نگهداری می شوند.

شرح ایده

انتخاب، حرکت و قرار دادن - ایده طبیعی و راحت است. به سادگی شگفت انگیز است که وقتی ماوس به یک وسیله جانبی ضروری برای رایانه تبدیل شد، متولد نشد.

بارزترین مثال انتخاب یک محصول در یک فروشگاه اینترنتی است. محصول مورد نظر را با ماوس انتخاب کنید و آن را به سبد خرید بکشید - به سادگی، طبیعی و راحت. آپلود فایل: گرفتن یک سند در خارج از پنجره مرورگر و قرار دادن آن بر روی یک عنصر صفحه و در نتیجه شروع انتقال سند به سرور نیز یک ایده عملی است.

برای توسعه دهنده، ایده "کشیدن و رها کردن" دستکاری عناصر صفحه بدون محاسبه مجدد دستی مختصات و اندازه تگ ها، امکان انتخاب چندین عنصر و تراز کردن آنها و جابجایی کناره های تگ های بلوک است.

HTML و CSS زبان‌های عالی برای توصیف تگ‌ها و استایل دادن به آن‌ها هستند، اما زمانی که یک توسعه‌دهنده توانایی دستکاری عناصر صفحه را بدون محاسبه مجدد دستی مختصات و اندازه‌ها داشته باشد، کار را راحت‌تر و کارآمدتر می‌کند.

انتقال آسان فایل

"کشیدن و رها کردن": ترجمه از انگلیسی به روسی به معنای واقعی کلمه شبیه "کشیدن و رها کردن" است. در عمل، به نظر می رسد و بهتر کار می کند: انتخاب، انتقال و رها - ساده و طبیعی.

پیاده سازی انتقال فایل در یک صفحه به یک صفحه، به سرور یا برای استفاده های دیگر بسیار ساده است.

AT این مثالچندین فایل روی دسکتاپ با ماوس انتخاب شدند (شکل سمت چپ). در انتخاب، دکمه سمت چپ ماوس فشار داده شد و "رفت" انتخاب شده به سبد خرید. خود مرورگر نشان داد که چگونه این اتفاق می‌افتد، یک راهنمایی "کپی" نوشت و خطوط کلی فایل‌های در حال جابجایی را ایجاد کرد.

وقتی موش بالای سبد بود، بازدیدکننده رها شد دکمه سمت چپماوس، رویداد کشیدن و رها کردن انجام شد و در صفحه سایت (تصویر پایین)، کد جاوا اسکریپت قادر به دریافت و پردازش تمامی فایل هایی بود که بازدیدکننده به صفحه (سایت) ارائه کرده بود.

شرح پیاده سازی

کدی که این روش را انجام می دهد بسیار ساده است. حتی یک توسعه دهنده تازه کار می تواند آن را در هر موردی تکرار کند.

در اینجا، رابط کاربری با دو تگ نشان داده می‌شود: scPlaceFile (این خود سبد است که می‌خواهید فایل‌ها را در آن قرار دهید) و scPlaceFiles (این نتیجه پردازش فایل‌ها است، در این مورد فهرستی از آنها).

منطق صفحه به شرح زیر است. هنگامی که صفحه در مرورگر بارگذاری می شود، کنترل کننده رویداد "ondrop" در سبد اختصاص داده می شود - قرار دهید، بقیه رویدادها مسدود شده و استفاده نمی شود.

صفحه به طور معمول کار می کند، اما به محض اینکه بازدید کننده فایل (فایل ها) را انتخاب کرده و آنها را به تصویر سبد، یعنی به تگ scPlaceFile بکشد، رویداد "فایل ها رسیده اند" پردازش می شود.

این کنترلر به سادگی لیستی از فایل ها را نمایش می دهد. تعداد آنها در event.dataTransfer.files.length است و اطلاعات مربوط به هر فایل در event.dataTransfer.files[i]name. آنچه باید با داده های دریافتی انجام شود توسط توسعه دهنده تعیین می شود، در این حالت، لیستی از فایل های دریافتی به سادگی تشکیل می شود.

پس از پردازش، رویداد مسدود شده و منتشر نمی شود. این امر ضروری است تا مرورگر درگیر فعالیت های آماتور نباشد و در پردازش اطلاعات دریافتی دخالت نکند.

DnD و داده های خارجی

آپلود تصاویر روی سرور به صورت "کشیدن و رها کردن" یک روش معمول در این فناوری است. به طور معمول، یک توسعه دهنده یک فرم آپلود فایل (1) ایجاد می کند که به روش معمول (2) کار می کند. بازدیدکننده معمولاً می‌تواند فایل‌ها را انتخاب کرده و آپلود کند.

با این حال، اگر یک بازدیدکننده به مکان خاصی در فرم کشیده و رها کند، فیلد نام فایل (فایل ها) به طور خودکار پر می شود.

آی تی تصمیم خوب. البته اعتراف به اینکه ماوس روی کامپیوتر وجود ندارد بسیار دشوار است. اما بهتر است رابط کاربری را به روش معمول و در پیاده سازی DnD توسعه دهید.

DnD و داده های داخلی

مراقبت از علایق بازدیدکننده همیشه مهم است، اما نگرانی های توسعه دهنده نیز مهم است. شما می توانید "کشیدن و رها کردن" را نه تنها پیاده سازی کنید به معنی استاندارد، بلکه با مدیریت رویدادهای ماوس در عناصر صفحه.

وظیفه محاسبه مقادیر مختصات برچسب و اندازه آنها به طور مداوم مطرح می شود. محاسبه دستی تمرین خوبی است، اما گزینه تعاملی راحت تر است. همه تگ ها همیشه به شکل مستطیل هستند و با نظارت بر رویدادهای ماوس در کناره های عناصر، می توانید این قابلیت را ایجاد کنید که به طور خودکار عناصر را به مکان مناسب در صفحه منتقل کنید یا آنها را تغییر دهید.

مدیریت رویداد کلیک دکمه ماوس - به خاطر سپردن مختصات مکان کلیک، به عنوان مثال، یکی از طرفین عنصر. ماوس را حرکت دهید - طرف در جهت دلخواه حرکت می کند. رها کردن دکمه ماوس - سمت متوقف می شود و مختصات آن تغییر می کند. به این ترتیب می توانید موقعیت عنصر یا اندازه آن را تغییر دهید.

به طور رسمی کشیدن و رها کردن نیست، اما اثر مشابه و عملی است. با ساختن کنترل کننده های جهانی برای هر عنصر صفحه، می توانید نتیجه تعاملی خوبی داشته باشید، سرعت توسعه را افزایش دهید و کد را ساده کنید.

برنامه نویسی بصری و دستی

ماوس روی رایانه و انگشتان روی تلفن هوشمند رویکردهای کاملاً متفاوتی برای اجرای رابط کاربری (بازدید کننده، توسعه دهنده) هستند. این یک نیاز کاملا طبیعی و مدرن برای سازگاری بین مرورگرها است.

همه اینها با هم ایجاد صفحات را پیچیده می کند، اما با استفاده از ایده "کشیدن و رها کردن" به شکل استاندارد آن، استفاده از رویدادهای آن، ترکیب این ایده با رویدادهای معمول روی عناصر، می توانید مکانیزمی را پیاده سازی کنید که در آن ایجاد صفحه به صورت بصری رخ خواهد داد.

حالا بیایید به انتخاب یک عنصر یا عناصر نگاه کنیم. واقعیت انتخاب - ظاهر یک منوی زمینه، به عنوان مثال، هدف تراز کردن یک انتخاب شده (چپ، راست، مرکز)، یا توزیع عناصر به صورت عمودی یا افقی با همان مرحله، یا تغییر اندازه آنها (حداقل، حداکثر) است.

محاسبه مجدد خودکار مختصات و ابعاد نسبت به دستی ارجحیت دارد. اشتباهات کمتر - هدف سریعتر به دست می آید. علاوه بر این، می توانید یک صفحه در یک مرورگر ایجاد کنید، موقعیت و اندازه عناصر را ذخیره کنید. با باز کردن این صفحه در گوشی هوشمند، می توانید مختصات و ابعاد را اصلاح کنید و آنها را به خاطر بسپارید مدل خاصنسخه گوشی هوشمند یا مرورگر

بنابراین همان صفحه بدون انطباق دستی با الزامات سازگاری بین مرورگرها، داده های متفاوتی برای نمایش خواهد داشت. دستگاه های مختلفو در مرورگرهای مختلف

اگر به بازدید کننده اجازه دهید این مراحل را به تنهایی انجام دهد و همچنین عناصر صفحه لازم را از بین موارد ارائه شده توسط توسعه دهنده انتخاب کند، می توانید با در نظر گرفتن نظر کاربر از سازگاری بین مرورگرها و عملکرد مورد نیاز صفحه اطمینان حاصل کنید. .

جایی که عناصر رابط کاربری گرافیکی با استفاده از شبه نگاره ها پیاده سازی می شوند) با استفاده از ماوس یا صفحه لمسی.

این روش با "گرفتن" (با فشار دادن و نگه داشتن کلید اصلی ( اولین، اغلب دکمه سمت چپ ماوس) یک شی که روی صفحه کامپیوتر نمایش داده می شود، به صورت برنامه نویسی برای چنین عملیاتی در دسترس است، و آن را به مکان دیگری منتقل می کند (برای تغییر مکان) یا "پرتاب" آن روی عنصر دیگر (برای فراخوانی مورد مربوطه). اقدام ارائه شده توسط برنامه). در رابطه با ویندوز (همچنین قابلیت جابجایی به روش مشابه) معمولاً از این اصطلاح استفاده نمی شود.

اقدامات اساسی و ساده‌ترین نمونه‌های اعمال کشیدن و رها کردن عبارتند از: حرکت یک شی، انتقال یک شی به داخل از پانل به پانل، اگرچه در مدرن سیستم های عاملکشیدن و رها کردن به طور گسترده ای مورد استفاده قرار گرفته است و یکی از راه های اصلی تعامل با رایانه در یک رابط کاربری گرافیکی است.

عناصر رابط زیر می توانند اشیایی برای جابجایی باشند: نمادهای دسکتاپ (آیکون ها)، نوار ابزار شناور، میانبرهای برنامه در نوار وظیفه (شروع با Win XP)، عناصر TreeView، رشته متن، سلول DataGridView، همچنین عناصر OLE. اشیاء می توانند هم در یک منطقه خاص، در یک پنجره، بین پانل های یک پنجره و بین پنجره های مختلف حرکت کنند.

رویداد کشیدن باید توسط برخی از اقدامات کاربر فعال شود. اغلب، این عمل فشار دادن دکمه سمت چپ ماوس بر روی یک عنصر است (این رویداد MouseDown نامیده می شود)، که می تواند در ظرف آن جابجا شود. برخی از مؤلفه‌ها رویدادهای شروع drag-n-drop خود را دارند - برای مثال، TreeView یک رویداد ItemDrag دارد.

بنیاد ویکی مدیا 2010 .

ببینید «کشیدن و رها کردن» در فرهنگ‌های دیگر چیست:

کشیدن و انداختن- 〈[ dræg ənd drɔ̣p] n. ; unz. EDV〉 das Anklicken eines Objektes، das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. دورت ویدر losgelassen wird [انگلیسی. "ziehen" + و "und" + "افتاده... ... Universal-Lexikon" را بکشید

فرم انجام هر عمل در رابط های گرافیکیکاربر، به معنای استفاده است موس کامپیوتر. ترجمه شده از انگلیسی به معنای واقعی کلمه: کشیدن و رها کردن است. عمل با عمل بر روی قابل مشاهده بر روی صفحه انجام می شود ... ... واژه نامه اصطلاحات تجاری

کشیدن و انداختن- (محاسبات) برای جابجایی یک نماد، فایل، و غیره در سراسر صفحه با استفاده از ماوس و رها کردن آن در مکان دیگری (صفت بکشید و رها کنید) ورودی اصلی: بکشید … فرهنگ لغت مفید انگلیسی

کشیدن و انداختن- IT برای انتقال چیزی از یک ناحیه از صفحه کامپیوتر به قسمت دیگر با استفاده از ماوس: »نرم افزار به شما امکان می دهد عناصر را برای تصاویر صفحه، متن و غیره بکشید و رها کنید. هر جایی که بخواهید ورودی اصلی: کشیدن … شرایط مالی و تجاری

کشیدن و انداختن- فعل ایالات متحده آمریکا n.; ژنرال: ; Pr.: unz.; EDV〉 das Anklicken eines Objektes، das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. دورت ویدر losgelassen wird)