حوادث را بکشید و رها کنید. سؤالات عمومی و تئوری فناوری Drag and Drop. Drop Limit را برای کشیدن بکشید

Borland نسخه خاص واسط Drag & Drop را برای كتابخانه VCL پیاده سازی كرده است (ترجمه شده با عنوان "drag and drop"). این رابط داخلی - شما می توانید هرگونه کنترل دلفی را در داخل فرم ارسال کنید و دریافت کنید (به جز خود فرم) این برنامه بدون استفاده از توابع مربوط به API ویندوز پیاده سازی می شود - آنها باید هنگام سازماندهی ارتباط با سایر کارها با کشیدن و رها کردن استفاده شوند.

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

لغو عملیات کشیدن و رها کردن یا کشیدن و بارانداز فعلی را لغو می کند.

تابع FindDragTarget (const Pos: TPoint؛ AllowDisabled: Boolean): TControl؛

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

عملکرد IsDragObject (فرستنده: موضوع): بولی؛

این تابع تعیین می کند که آیا شیء تعریف شده در پارامتر Sender از نوادگان کلاس است یا خیر.TDragObject . می توانید از این تابع به عنوان پارامتر Source در کنترل کننده های رویداد OnDragOver و OnDockOver استفاده کنید تا مشخص شود آیا شیء کشیده پذیرفته خواهد شد یا خیر. همچنین عملکردIsDragObject می توان به عنوان پارامتر Source در دستیاران رویداد OnDragDrop و OnDockDrop به منظور تفسیر درست شیء کشیده شده استفاده کرد.

خواص DragMode ، DragCursor ، روش های StartDrag ، OnDragOver ، OnDragDrop ، OnEndDrag ، OnStartDrag ، پارامتر را بپذیرید

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

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

شروع درگ با خاصیت DragMode تعیین می شود ، که می تواند در طی مراحل طراحی تنظیم شود یا از نظر برنامه ای برابر dmManual یا dmAutomatic باشد. مقدار dmAutomatic (اتوماتیک) هنگام کلیک کاربر بر روی مؤلفه ، شروع خودکار فرایند کشیدن و رها کردن را تعیین می کند. با این حال ، در این حالت ، رویداد OnMouseDown مرتبط با کاربر که روی دکمه ماوس برای این مؤلفه کلیک می کند به هیچ وجه رخ نمی دهد.

رابط کاربری انتقال و دریافت مؤلفه ها مدتی پیش ظاهر شد. این تعامل دو کنترل را در زمان اجرا فراهم می کند. در این حالت می توان هرگونه عملیات لازم را انجام داد. با وجود سادگی اجرای و سن توسعه ، بسیاری از برنامه نویسان (به ویژه مبتدیان) این سازوکار را مبهم و عجیب می دانند. با این حال ، استفاده از کشیدن و رها کردن می تواند بسیار مفید و آسان برای اجرای باشد. اکنون این را خواهیم دید.

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

باور کنید ، فقط مختصات X ، Y منتقل شده در پارامترهای رویداد OnDragOver و OnDragDrop را به مختصات فرم تبدیل کنید.

با خصوصیات Left و Top از مؤلفه ای که مکان نما بر روی آن کار می کند ، کار کنید. من یک مثال ساده را بیان می کنم. مؤلفه Memo را روی فرم قرار دهید و ویژگی Align را روی alTop قرار دهید. پانلی را روی فرم قرار دهید ، همچنین ویژگی Align را روی alTop تنظیم کنید و مقدار خاص آن را برای ویژگی Height ، مثلاً 6 یا 7 پیکسل تنظیم کنید. DragMode را روی dmAutomatica و DragCursor در crVSplit نصب کنید. یک جزء Memo دیگر را قرار داده و Align را روی AlClient تنظیم کنید. به طور همزمان هر دو مؤلفه Memo ، پانل را انتخاب کنید و یک کنترل کننده رویداد مشترک OnDragOver را مطابق شکل زیر ایجاد کنید:

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

اهداف استفاده از فناوری Drag n Drop

استفاده از فناوری کشیدن و رها کردن به من این امکان را می دهد تا با کمی خون ، سه مشکل را حل کنم:

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

وظایف مشخص شده است ، ما به اجرای آنها ادامه خواهیم داد.

ImageView جعل لمس

تمام اشکال من اشیاء ImageView هستند. متأسفانه ، معلوم شد كه اجرای Drag & Drop در اندروید اجازه نمی دهد كه "از جعبه خارج شود" در هنگام لمس ، تعویض تصویر شی را انجام دهد. با این وجود ، این کار با استفاده از API کاملاً حل شده است. ما باید چندین مرحله ساده را انجام دهیم:

یک شیء DragShadowBuilder ایجاد کنید.
با روش startDrag تماس بگیرید.
ImageView ما را مخفی کنید که با فراخوانی متد setVisibility با پارامتر View.INVISIBLE شکل را نشان می دهد. در نتیجه ، تنها شیء DragShadowBuilder روی صفحه باقی خواهد ماند که در مورد گرفتن تصویر ، سیگنالی برای کاربر خواهد بود.

این مراحل باید در OnTouchListner of ImageView اجرا شود. برای این کار ، روش onTouch را دوباره تعریف کنید:

@ نادیده گرفتن بوی عمومی onTouch (نمایش نمای ، MotionEvent motionEvent) (اگر (حرکتEvent. GetAction () \u003d\u003d MotionEvent. ACTION_DOWN) (ClipData clipData \u003d ClipData. NewPlainText ("" ، "")) DragShadowBuilder dsb \u003d new View. (مشاهده) ؛ مشاهده. startDrag (کلیپداتا ، dsb ، نمایش ، 0) ؛ مشاهده. setVisibility (نمایش. غیرقابل مشاهده) ؛ بازگشت واقعی ؛) دیگری (بازگشت غلط ؛))

همه چیز بسیار ساده است. بنابراین ، با تعویض تصویر کشف شده ، بیایید به وظیفه بعدی برویم.

Drop Limit را برای کشیدن بکشید

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

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

وقتی کاربر کشیدن و رها کردن کنترل کننده DragListeners را کامل کرد ، رویداد ACTION_DRAG_ENDED مطرح می شود.
در DragListener می توانید با فراخوانی روش DragEvent.getResult () اطلاعات دقیق تری در مورد عملیات درگ بدست آورید.
اگر DragListener در پاسخ به رویداد ACTION_DROP به واقعیت برگردد ، یک تماس برای getResult نیز صادق خواهد بود ، در غیر این صورت نادرست است.

بنابراین ، باید رویداد ACTION_DRAG_ENDED را رهگیری کنم و با روش getResult تماس بگیرم. اگر نادرست برگردد ، آنگاه کاربر قطعه را از صفحه بیرون کشید و من باید ImageView را در حالت مرئی قرار دهم.

@ نادیده گرفتن onulin عمومی بول (نمایش نمای ، DragEvent dragEvent) (int dragAction \u003d dragEvent. GetAction ()؛ مشاهده dragView \u003d (مشاهده) dragEvent. GetLocalState ()؛ if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (شاملDragable \u003d کاذب)) if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (شاملDragable \u003d صحیح است)) اگر (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (نمایش VISIBLE)؛)) \u003d DragEvent. ACTION_DROP & amp؛ & amp؛ شاملDragable) (checkForValidMove (نمایش (ChessBoardSquareLayoutView) نمایش ، dragView)؛ dragView. تنظیم قابلیت تنظیم (نمایش. قابل مشاهده)؛ بازگشت صحیح؛) قطره خصوصی boEanNotHandled (DragEvent dragEventled) )))

اکنون کاربر می تواند از هر شکل این رقم را رها کند و هیچ اتفاق بدی رخ نخواهد داد.

تعیین حرکات مجاز

قسمت آخر مقاله به بررسی صحت حرکتی که کاربر در تلاش است انجام دهد اختصاص داده شده است. قبل از بحث در مورد این موضوع به طور مفصل ، یک توضیح کوچک برای توضیح ساختار برنامه خود خواهم داد. تخته شطرنج به عنوان TableLayout نشان داده می شود و هر سلول از فرزندان LinearLayout است و دارای OnDragListener است.

بعلاوه ، هر OnDragListener به یک واسطه ای اشاره می کند که از تعامل اشیاء بازی مراقبت می کند و موقعیت سلول فعلی را به خاطر می آورد.

هنگامی که کاربر یک شکل را روی یک سلول می کشد ، اقدامات زیر ممکن است:

از رویداد ACTION_DRAG_ENTERED استفاده کنید تا متغیر «شاملDraggable» را درست کنید.
از رویداد ACTION_DRAG_EXITED استفاده کنید تا متغیر «شاملDraggable» را نادرست تنظیم کنید.
با استفاده از رویداد ACTION_DROP برای درخواست کارگزار درباره اعتبار یک چهره در این سلول.

در زیر کدی وجود دارد که منطق توصیف شده را پیاده سازی می کند

@ نادیده گرفتن onulin عمومی بول (نمایش نمای ، DragEvent dragEvent) (int dragAction \u003d dragEvent. GetAction ()؛ مشاهده dragView \u003d (مشاهده) dragEvent. GetLocalState ()؛ if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_EXITED) (شاملDragable \u003d کاذب)) if (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENTERED) (شاملDragable \u003d صحیح است)) اگر (dragAction \u003d\u003d DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (نمایش VISIBLE)؛)) \u003d DragEvent. ACTION_DROP & amp؛ & amp؛ شاملDragable) (چکForValidMove ((نمایش ChessBoardSquareLayoutView) ، dragView) ؛ dragView. تنظیم قابلیت تنظیم (نمایش (قابل مشاهده)))

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

private void checkForValidMove (ChessBoardSquareLayoutView view، View dragView) (در صورت (واسطه. isValidMove (نمایش)) (صاحب ViewGroup \u003d (ViewGroup) dragView. getParent ()؛ مالک را حذف کنید ویو (dragView)؛ View (ViewView) (جاذبه. مرکز)؛ نمایش. ShowAsLanded ()؛ واسطه. HandleMove (نمایش)؛))

امیدوارم این مقاله به شما در توسعه پروژه های خود کمک کند.

برای مدت طولانی توابع جاوا اسکریپت وجود دارد که به ما امکان ایجاد رابط های کشیدن و رها کردن را می دهد. اما هیچکدام از این پیاده سازی ها مختص مرورگر نیستند. HTML5 روش خاص خود را برای ایجاد رابط های کشیدن و رها کردن (با کمی کمک JavaScript) دارد. در این مقاله ، ما به شما خواهیم گفت که چگونه به این هدف دست یابید ...

پشتیبانی از مرورگر

کشیدن و رها کردن HTML5 در حال حاضر توسط کلیه مرورگرهای رومیزی اصلی پشتیبانی می شود (از جمله اینترنت اکسپلورر (حتی پشتیبانی جزئی نیز در IE 5.5 موجود است)) ، اما توسط هیچ یک از مرورگرهای محبوب تلفن همراه پشتیبانی نمی شود.

کشیدن و رها کردن رویدادها

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

dragStart: وقتی کاربر شروع به کشیدن موارد می کند ، شروع می شود.
dragEnter: هنگامی که اولین مورد کشیده شده بر روی مورد مورد نظر کشیده می شود ، اخراج می شود.
dragOver: وقتی ماوس روی یک عنصر جابجا می شود باعث می شود که کشیدن رخ دهد.
dragLeave: اگر مکان نما کاربر هنگام کشیدن ، آیتم را ترک کند ، باعث می شود.
drag: هر بار که ماوس را حرکت می دهیم در هنگام کشیدن عنصر خود ، وارد عمل می شویم.
drop: وقتی قطره واقعی اجرا می شود باعث می شود.
dragEnd: وقتی کاربر هنگام کشیدن یک شیء ، دکمه ماوس را آزاد می کند ، شروع می شود.

با وجود همه این شنوندگان رویداد ، شما کنترل خوبی بر نحوه عملکرد رابط دارید.

انتقال داده شی

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

dataTransfer.effectAllowed \u003d مقدار: انواع مجاز اقدامات ، مقادیر ممکن را برمی گرداند: هیچ ، کپی ، copyLink ، copyMove ، پیوند ، لینک ، تغییر مکان ، همه و غیر مستقیم.
dataTransfer.setData (قالب ، داده): داده ها و قالب خاصی را اضافه می کند.
dataTransfer.clearData (فرمت): همه داده ها را برای یک قالب خاص پاک می کند.
dataTransfer.setDragImage (عنصر ، x ، y): تصویری را که می خواهید بکشید تنظیم می کند ، مقادیر x و y نشان می دهد مکان نشانگر ماوس در کجا قرار دارد (0 ، 0 آن را در بالا سمت چپ قرار می دهد).
data \u003d dataTransfer.getData (فرمت): همانطور که از نام آن پیداست ، داده ها را برای یک قالب خاص باز می گرداند.

ایجاد نمونه کشیدن و رها کردن

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

جسم را بکشید و رها کنید

اولین کاری که ما باید انجام دهیم ایجاد HTML است. ما divs را با استفاده از ویژگی قابل draggable می کنیم:

پس از اتمام این کار ، باید یک عملکرد JavaScript را تعریف کنیم که به محض شروع به حرکت این عنصر کار کند:

تابع dragStart (ev) (ev.dataTransfer.effectAllowed \u003d "move"؛ ev.dataTransfer.setData ("متن" ، ev.target.getAttribute ("شناسه"))؛ ev.dataTransfer.setDragImage (ev.target ، 100،100) ؛ درست برگردان ؛)

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

رها کردن شی

برای اینکه یک عنصر قطره را بپذیرد ، باید به 3 رویداد مختلف گوش کند: dragEnter ، dragOver و همچنین رویدادهای drop. بنابراین بیایید این را به HTML5 در تقسیم با شناسه بزرگ اضافه کنیم:

تابع dragEnter (ev) (ev.preventDefault ()؛ true true؛) dragOver (ev) (ev.preventDefault ()؛)

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

در قسمت بعدی ، ما عملکردی را برای تعیین زمان تبدیل شدن عنصر در هدف مورد نظر تعریف می کنیم:

تابع dragDrop (ev) (var data \u003d ev.dataTransfer.getData ("متن")؛ ev.target.appendChild (document.getElementById (داده))؛ ev.stopPropagation ()؛ برگشت غلط؛)

در این قسمت آخر ، ابتدا متغیر داده را تنظیم می کنیم ، در آنجا تمام داده هایی را که برای قالب متن در دسترس است دریافت می کنیم ، و سپس داده ها را به قسمت div اضافه می کنیم تا در آنجا نیاز به "رها کردن" عنصر داشته باشیم.

بخش قطره را به یک هدف تبدیل کنید

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

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

بسیاری از برنامه های کشیدن و رها کردن وجود دارد که با استفاده از کتابخانه های جاوا اسکریپت ساخته می شوند ، و اغلب استفاده از آنها ساده تر است. اما امیدواریم که در این تکنیک HTML5 و JavaScript ، پتانسیل های آینده را برای حل مشکلات خود مشاهده کنید.

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

برای وب سایت ها ، برنامه های افزودنی و برنامه های XUL ، می توانید تنظیم کنید که کدام عناصر می توانند تبدیل شوند قابل کشیدننوع بازخورد قابل کشیدن عناصر تولید می کنند ، و قابل استفاده عناصر

این نمای کلی از HTML Drag and Drop شامل توضیحی در مورد رابط ها ، اقدامات اساسی برای اضافه کردن پشتیبانی از کشیدن و رها کردن به یک برنامه ، و خلاصه قابلیت همکاری از رابط ها است.