نام فناوری کشیدن و رها کردن به صورت ترجمه شده است. تکنیک Drag-n-Drop با استفاده از jQuery. تنظیم تعامل Droppable
کشیدن و رها کردن یکی از راه های به اشتراک گذاری داده ها بین برنامه ها است. این روش تبادل توسط بسیاری از نرم افزارهای کاربردی استفاده می شود. برای مثال، اغلب فایل‌ها و پوشه‌ها از این طریق منتقل می‌شوند.
کتابخانه اجزای بصری - VCL نسخه مخصوص به خود Drag&Drop را پیاده‌سازی می‌کند، فناوری که دریافت و انتقال هر عنصر کنترلی را در همان فرم فراهم می‌کند. با این استفاده داخلی، VCL به سیستم عامل دسترسی ندارد، هرچند برای ارتباط برنامه های کاربردی مختلفباید از توابع مناسب Windows API استفاده کرد.
کاربر بر روی کلیک می کند دکمه سمت چپماوس، می تواند یک عنصر کنترلی (شیء منبع) را روی عنصر دیگر (شیء مقصد) بکشد. در لحظه‌های کشیدن و رها کردن، رویدادهایی تولید می‌شوند که برنامه باید آنها را پردازش کند (گیرنده رویداد عنصری است که نشانگر ماوس روی آن قرار دارد). ویژگی DragMode اجزاء مسئول مشارکت آنها در فرآیند تبادل داده است.
DragMode=dmAutomatic- رویدادها به طور خودکار فعال می شوند، برنامه نویس فقط کدهای مربوط به کنترل کننده رویداد را می نویسد.
DragMode=dmManual-برنامه نویس باید تمام تماس ها را خودش سازماندهی کند.
کشیدن رویدادها
رویداد OnDragOverزمانی اتفاق می افتد که نشانگر ماوس روی شی مقصد حرکت می کند و همچنین زمانی که دکمه روی این شی آزاد می شود.
پارامترهای رویداد:
شی فرستنده - گیرنده (مکان نما بالای آن است).
منبع - شی منبع؛
X,Y - مختصات ماوس در سیستم ناحیه مشتری شیء فرستنده.
State- State (دارای یکی از سه مقدار dsDragEnter - نشانگر ماوس روی عنصر ظاهر شد؛ dsDragMove مکان نما روی عنصر حرکت می کند؛ dsDragLeave - مکان نما عنصر را ترک کرد یا دکمه روی عنصر رها شد).
Accept یک متغیر بولی است. در این متغیر، کنترل کننده باید تصمیم خود مبنی بر پذیرش یا عدم پذیرش شی منبع را بازگرداند.
به عنوان مثال، یک جزء کلاس Label(Name=Label1) فقط باید اجزای کلاس Shape (اشکال هندسی) را بپذیرد، سپس کنترل کننده آن شامل بررسی شی منبع قابل حمل (Source) خواهد بود:
void __fastcall TForm1::Label1DragOver(TObject *فرستنده، TObject *منبع،
int X، int Y، وضعیت TDragState، bool &Accept)
Accept=Source->ClassNameIs("TShape");
رویداد OnDragDropزمانی اتفاق می افتد که دکمه سمت چپ ماوس روی عنصری که آماده دریافت است رها می شود. پارامترهای Sender، Source، X و Y آن همان معنای رویداد قبلی را دارند. محتوای این کنترل کننده بستگی به عملکردهایی دارد که برنامه نویس به کاربر اجازه می دهد از طریق کشیدن و رها کردن انجام دهد. این ممکن است تغییر در مکان اشیاء، تبادل اطلاعات و غیره باشد.
در مثال زیر، حرکت فیزیکی اجسام وجود ندارد. مولفه Label1 یک اشاره گر به شی جابجا شده (شکل هندسی) دریافت می کند و مقادیر ویژگی ها (ارتفاع، عرض) را برای محاسبه محیط شکل می خواند. نتیجه محاسبه در Label1-> Caption قرار می گیرد.
void __fastcall TForm1::Label1DragDrop(TObject *Sender,
TObject *منبع، int X، int Y)
float p, pi=3.14; int w,h,r,D;
if (String(Source->ClassName())=="TShape")
h=((TShape *)منبع)->قد;
w= ((TShape *) Source)->Width ;
D=w; اگر (D > h) D = h;
سوئیچ (((TShape *) منبع) -> شکل)
( مورد strRectangle:
Label2->Caption "مستطیل";
Label2->Caption = "مربع";
Label2->Caption = "دایره";
Label2->Caption = "بیضی";
p=pi*(3*(w+h)/4-sqrt(w*h)/2);
case strRoundRect:
Label2->Caption = "گرد
مستطیل"؛
r=(D-((TShape*)منبع)->Pen->
p=2*(w+h)-8*r+2*pi*r;
Case strRoundSquare:
Label2->Caption="گرد
مربع"؛
r=(D-((TShape*)منبع)->Pen->
p=4*D-8*r+2*pi*r;
p=p/(Form1->PixelsPerInch/2.54);
Label1->Caption = FloatToStr(p);
هنگامی که فرآیند کشیدن به پایان می رسد، صرف نظر از نتیجه آن، شی اصلی دریافت می کند رویداد OnEndDrag. پارامترهای آن عبارتند از:
فرستنده - اشاره گر شی منبع؛
هدف - اشاره گر شی هدف.
X، Y - مختصات مکان نما.
در مثال زیر، مؤلفه wrapper Shape1 نام شی مورد نظر را می‌آموزد (اگر شی مورد نظر پذیرفته نشود، NULL ارسال می‌شود):
void __fastcall TForm1::Shape1EndDrag(TObject *فرستنده، TObject *Target،
اگر (هدف != NULL)
Label2->Caption =(AnsiString) ((TComponent *) Target)->Name;
برای مدت طولانی، از توابع جاوا اسکریپت برای ایجاد قابلیت Drag&Drop استفاده می شد، اما مرورگرها همیشه نمی توانستند نتیجه را به درستی نمایش دهند. HTML 5 راهی برای پشتیبانی هوشمندانه Drag&Drop با کمی جاوا اسکریپت دارد. این مقاله یک مثال تصویری از استفاده از Drag&Drop در HTML 5 را شرح می دهد.
کشیدن و رها کردن رویدادها
موارد زیر رویدادهای Drag&Drop هستند که می توانید از آنها برای کنترل فرآیند کشیدن و رها کردن استفاده کنید:- dragStart: کاربر شروع به کشیدن عنصر می کند.
- dragEnter: عنصری که کشیده می شود به عنصر انتهایی می رسد.
- dragOver: نشانگر ماوس در حین کشیدن روی عنصر قرار دارد.
- dragLeave: نشانگر ماوس عنصر کشیده شده را ترک می کند.
- کشیدن: مکان نما در حین کشیدن حرکت می کند.
- drop: افت عنصر اتفاق می افتد.
- dragEnd: کاربر در حین کشیدن مکان نما ماوس را رها می کند.
شی انتقال داده
این جایی است که فرآیند کشیدن و رها کردن انجام می شود. مهمترین پارامترها:- dataTransfer.effectAllowed=value: نوع عملکرد موجود را برمی‌گرداند - هیچ، کپی، copyLink، copyMove، پیوند، انتقال، انتقال، همه، یا بدون مقدار اولیه.
- dataTransfer.setData(فرمت، داده): داده ها را در قالب دلخواه اضافه می کند.
- dataTransfer.clearData(format): داده ها را پاک می کند.
- dataTransfer.setDragImage(عنصر، x، y): تصویر را تنظیم می کند که در مختصات مکان نما (0، 0 - گوشه سمت چپ بالا) کشیده شود.
- data = dataTransfer.getData(format): داده ها را برمی گرداند.
مثال کشیدن و رها کردن
حالا بیایید به یک مثال ساده بصری استفاده از Drag&Drop نگاه کنیم، که در آن دو div کوچک آبی را می‌توان به یک قرمز بزرگ منتقل کرد و همچنین به جای اصلی خود بازگرداند.شروع به کشیدن یک شی کنید
اول از همه، شما باید با افزودن ویژگی dragable، نشانه گذاری HTML را برای بلوک ها ایجاد کنید:
سپس یک تابع فرآیند شروع جاوا اسکریپت تعریف کنید:
تابع dragStart(ev) ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text"، ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) ؛ بازگشت واقعی؛ )
خط اول نوع احتمالی کشیدن و رها کردن - حرکت را مشخص می کند، دوم - داده های فرآیند - نوع (Text) و ID را تنظیم می کند. در خط سوم، setDragImage موقعیت مکان نما را تعیین می کند، در این مورد در وسط یک مربع 200x200 پیکسل.
کشیدن یک شی را به پایان برسانید
شما باید سه رویداد را تنظیم کنید: dragEnter، dragOver و drop:
علاوه بر این، ما باید توابع جاوا اسکریپت را برای تکمیل فرآیند کشیدن اضافه کنیم - تا مشخص کنیم هنگام آزاد شدن مکان نما چه اتفاقی برای عناصر باید بیفتد:
تابع dragEnter(ev) ( event.preventDefault(); return true؛ ) تابع dragOver(ev) ( event.preventDefault(); )
در این مثال سادهفقط اقدامات اصلی تنظیم شده است، اما موارد دیگر را می توان اضافه کرد - تغییر رنگ پس زمینه، اضافه کردن متن و غیره. مرحله بعدی مرحله نهایی است. این جایی است که شما عمل کشیدن پایان را تنظیم می کنید:
تابع dragDrop(ev) ( var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.stopPropagation(); return false;)
همانطور که از مثال مشاهده می کنید، بلوک های آبی را می توان پس از کشیدن به جای اصلی خود بازگرداند. خوشبختانه انجام این کار بسیار آسان است. همه توابع اعلام شده اند، باید کد زیر را اضافه کنید:
نتیجه
بسیاری از راه‌حل‌های Drag&Drop با استفاده از کتابخانه‌های جاوا اسکریپت ایجاد شده‌اند و استفاده از آنها اغلب آسان‌تر از مثال توصیف شده است. با این حال، به احتمال زیاد در آینده، دسته ای از HTML5 و جاوا اسکریپت بیشتر و بیشتر مورد استفاده قرار خواهند گرفت.استفاده از تکنولوژی کشیدن و انداختن (کشیدن و انداختن) به کاربر اجازه می دهد تا اشیاء مختلف را از یکی به دیگری منتقل کند، به عنوان مثال، عناصر یک لیست به لیست دیگر. برای انجام این کار، باید از دو کنترل استفاده کنید: یک سینک و یک منبع. گیرنده شیئی است که شی مبدأ (شیء متحرک) را دریافت می کند.
رویدادهایی که در حین حرکت اجسام رخ می دهند به ترتیبی که رخ می دهند در زیر فهرست شده اند.
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; پایان؛
حال با اجرای اپلیکیشن و فشردن دکمه ماوس روی پنل، می توانیم شی پنل را در سراسر فرم جابجا کنیم.
نتیجه گیری: ما با تکنولوژی آشنا شدیم کشیدن و انداختن(کشیدن و رها کردن) و در عمل از آن استفاده کرد.
182در این مثال یک عنصر div را انتخاب کرده و با فراخوانی آن را قابل جابجایی می کنیم متد dragable().. همانطور که در شکل زیر نشان داده شده است، در سند باز شده، عنصر موقعیت معمول خود را می گیرد، اما پس از آن می توان آن را با اشاره گر ماوس به هر مکانی در پنجره مرورگر منتقل کرد:
ویژگی کشیدن و رها کردن به خودی خود مفید است، اما زمانی مفیدتر است که همراه با تعامل Droppable که در ادامه توضیح داده می شود، استفاده شود.
تعامل قابل کشیدن تنها از طریق استفاده از نشانه گذاری HTML خاص و سبک های CSS پیاده سازی می شود. این بدان معنی است که این عملکرد تقریباً در هر مرورگری کار می کند، اما عناصری که به آن مجهز شده اند قادر به کار با امکانات مشابه درگ و رها کردن نخواهند بود. سیستم های عامل.
عملیات کشیدن و رها کردن تعریف شده توسط مشخصات HTML5 معمولاً با استفاده از مکانیزم های سیستم عامل بومی اجرا می شود. اگر از مکانیزم کشیدن و رها کردن رابط کاربری جی کوئری استفاده می‌کنید، بهتر است معادل‌های HTML5 را غیرفعال کنید تا از درگیری جلوگیری شود. برای این کار، ویژگی dragable عنصر بدنه سند را روی false قرار دهید.
سفارشی کردن تعامل قابل کشیدن
گزینه های سفارشی سازی زیادی برای تعامل Draggable وجود دارد. اکثر خواص مهم، که در بخش های زیر پوشش داده شده است، در جدول زیر نشان داده شده است:
| ویژگی | شرح |
|---|---|
| محور | حرکت را به جهات خاصی محدود می کند. مقدار پیش‌فرض false است، به این معنی که هیچ محدودیتی وجود ندارد، اما می‌توانید مقدار "x" (فقط در محور x حرکت کنید) یا "y" (فقط در امتداد محور y حرکت کنید) را مشخص کنید. |
| مهار | مکان عنصر شناور را به ناحیه خاصی از صفحه محدود می کند. انواع مقادیر پشتیبانی شده در جدول زیر با مثال مربوطه توضیح داده شده است. مقدار پیش فرض نادرست است، به این معنی است که هیچ محدودیتی وجود ندارد |
| تاخیر انداختن | مدت زمانی را که یک عنصر قبل از حرکت باید کشیده شود را مشخص می کند. مقدار پیش فرض 0 است که به معنای عدم تاخیر است |
| فاصله | فاصله ای را که کاربر باید قبل از حرکت یک عنصر از موقعیت شروع خود بکشد را مشخص می کند. مقدار پیش فرض 1 پیکسل است |
| توری | اتصال عنصر منتقل شده به سلول های شبکه را مجبور می کند. مقدار پیش فرض false است، که به معنای عدم الزام آور است |
محدودیت جهت حرکت
راه های مختلفی وجود دارد که می توانید حرکت یک عنصر را به جهات خاصی محدود کنید. اولین مورد استفاده از گزینه axis است که به شما امکان می دهد جهت حرکت را به محور X یا Y محدود کنید. یک مثال در زیر نشان داده شده است:
...