استفاده از Drag & Drop در HTML5



استفاده از Drag & Drop در HTML5

در این مقاله مقاله آموزشی طراحی وب قصد داریم آشنا شویم که چگونه در وب سایتمان از المان های Drag and Drop استفاده کنیم و با جزئیات و پیاده سازی آن آشنا خواهیم شد.

تا مدت ها توابع و function های جاواسکریپت تنها راه برای پیاده سازی المان های Drag and Drop در وب بودند اما هیچ کدام جزو قابلیت های Native (بومی) مرورگرهای اینترنت نبودند.

در html 5 برای پیاده سازی قابلیت Drag and Drop متدهای Native (بومی) در مرورگر وجود دارد (البته با کمی کمک از جاواسکریپت) که ما در این مقاله چگونگی پیاده سازی آن را بررسی خواهیم کرد.

پشتیبانی مرورگرها از Drag & Drop

در حال حاضر قابلیت Drag and Drop در  html 5 توسط تمام مرورگرهای مطرح پشتیبانی می شود  (حتی  IE نسخه 5.5 هم تا حدودی پشتیبانی می کند) اما متاسفانه هیچ کدام از مرورگرهای موبایلی مطرح این قابلیت را پشتیبانی نمی کنند.

 آشنایی با جزئیات Drag & Drop

در هر مرحله از عملیات  Drag and  Drop  یک (رویداد) event خاصی اجرا می شود تا مرورگر بداند کدام کد جاواسکریپت را باید اجرا کند.

 event ها به شرح زیر هستند:

 : dragStartاجرا در زمانی که کاربر شروع به درگ کردن و انتخاب می کند

 : dragEnterاجرا در زمانی که آبجکت درگ و انتخاب شده برای اولین بار روی آبجکت مقصد قرار می گیرد

 : dragOverاجرا در زمانی که ماوس در حین عملیات درگ و انتخاب کردن کردن بر روی آبجکت مقصد قرار می گیرد

 : dragLeaveاجرا در زمانی که کرسر ماوس آبجکت را در مقصد رها می کند

 : dragاجرا در هرباری که ما ماوس را در حین عملیات درگ کردن و انتخاب تکان می دهیم

 : dropاجرا در زمانی که آبجکت را در مقصد قرار می دهیم

: dragEnd اجرا در زمانی که کاربر پس از اتمام عملیات درگ کردن و انتخاب کردن کلیک ماوس را رها می کند.

 

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

 آشنایی با جزئیات Drag & Drop

روش های انتقال داده )Data Transfer Object(

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

dataTransfer.effectAlowed = value

مقادیر داده های عملیات های مجاز را برمی گرداند و دریافت می کند که شامل عملیات های none,copy,copyLink,copyMove,link,move,linkMove می باشد.

 

dataTransfer.setData (format, data)

دیتا و فرمت  داده آن را اضافه و مشخص می کند.

 

dataTransfer.clearData (format)

تمام دیتای متعلق به یک فرمت خاص را پاک می کند

 

dataTransfer.setDragImage (element,x,y)

تصویری که در هنگام درگ کردن نمایش داده می شود را ست و تنظیم می کند، مقادیر x, y مکانی که کرسور ماوس باید باشد را مشخص می کند. (0 و0 یعنی قسمت بالا و سمت چپ صفحه وب)

 

Data  = dataTransfer.getData (fromat)

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

 

مثالی برای ایجاد drag & drop

قصد داریم با مثالی ساده  Drag & Drop با html 5 را ایجاد کنیم، در این مثال دو div  ساده داریم که یکی بزرگتر است و ما می خواهیم المان هایی که داخل div کوچکتر هستند را به بزگتر درگ  کنیم و انتقال دهیم و دوباره به جای اولشان برگردانیم.

 

انتخاب و درگ کردن آبجکت (DRAGGING THE OBJECT)

اولین کاری که باید کنیم ساختن یک صفحه html است، به وسیله ویژگی Draggable می توانیم div ها را قابل درگ کردن کنیم:

<div id="boxA" <strong>draggable="true"</strong>></div>

 

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

function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);
   return true;
}

 

در کد بالا ابتدا مشخص می کنیم که چه نوع افکت خاصی مجاز است که مقدار آن را move قرار می دهیم، در خط دوم تابع یک مقدار برای این عملیات تنظیم کردیم کردیم که در این مثال نوع (type) آن Text و مقدار(value) را برابر آیدی)id( آبجکتی که می خواهیم درگ و انتخاب کنیم قرار می دهیم.

در مرحله بعد از متد setDrageImage استفاده کردیم تا مشخص کنیم که در حال درگ کردن چه چیزی هستیم و بعد اینکه کرسور ماوس در هنگام درگ کردن باید در کجا قرار بگیرد که با توجه به اینکه ابعاد div ها  200 * 200 پیکسل است ماوس را درست در مرکز  قرار می دهیم که در نهایت مقدار true را بر می گردانیم.

 

رها و دراپ کردن آبجکت (DROPPING THE OBJECT)

برای اینکه یک آبجکت بتواند عملیات درگ را بپذیرد نیاز داریم که 3 event مختلف را tlisten کنیم: dragEnter, dragOver , drop

بنابراین اینها را در کد html در div بزرگتر که با  آیدی)id(به نام bi g مشخص کردیم قرار می دهیم:

<div id="big" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>

 

تا اینجا ما event Listener ها را تعریف کردیم و حالا باید Function های مربوط به آنها را اضافه کنیم که با dragEnter و dragOver شروع می کنیم: 

function dragEnter(ev) {
   ev.preventDefault();
   return true;
}
function dragOver(ev) {
    ev.preventDefault();
}

 

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

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

ضمن اینکه با یک event به نام dragLeave می توانید تغییراتی که انجام داده اید را به حالت قبل بازگردانید.

در قسمت بعدی در تابع dragOver ما تنها از رفتار پیش فرض مرورگر جلوگیری کردیم تا عملیات رها کردن و drop کردن را بپذیرد.

قسمت بعدی کد جاییست که تابعی را تعریف و مشخص می کنیم که در زمانی که آنجکت را در قسمت هدف رها drop می کنیم اجرا شود:

function dragDrop(ev) {
   var data = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
   ev.stopPropagation();
   return false;
}

 

در کد بالا در ابتدا ما یک متغیر به نام data تعریف کردیم که تمام دیتایی که برای فرمت text در دسترس است را می گیرد و بعد این دیتا (که آبجکتی است که ما در حال درگ کردن و انتخاب آن هستیم) را به div ای که ما برای drop کردن و رها کردن آبجکت در نظر گرفته بودیم (append) اضافه می کند. در نهایت هم کدهایی برای متوقف کردن  propagation و برگرداندن مقدار false در انتهای کد قرار می دهیم.

 

تعریف یک بخشی به عنوان منطقه مورد نظر برای drop کردن

همانطور که در ابتدای مثال گفتیم ما می خواهیم که دو div کوچکتر که بالاتر تعریف کردیم بتوانند به محل قبلی خودشان با درگ و انتخاب کردن بازگردانده شوند. خوشبختانه اضافه کردن یک dropTarget بسیار ساده است زیرا توابع از قبل تعریف شده اند و تنها کاری ما باید بکنیم اضافه کردن event Linstener هاست می باشد.

<section id="section" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">

 

با استفاده از کد بالا ما قادر خواهیم بود div ها را با درگ کردن  و انتخاب کردن  به محل قبلی برگردانیم.

 

خلاصه

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

جهت ثبت پیام باید در سایت عضو شوید و یا وارد سایت شده باشید .
ورود به حساب کاربری / ایجاد حساب کاربری
کار با Built-in Functions در پایتون (2)

کار با Built-in Functions در پایتون (2)

در این مقاله زمیوسی در بخش آموزش قصد داریم در مورد کار با Built-in Functions در پایتون صحبت کنیم. شما قبلاً با محبوب ترین تابع در پایتون یعنی ()print آشنا شدید.

Cheat Sheet در پایتون - مبانی پایتون (1)

Cheat Sheet در پایتون - مبانی پایتون (1)

پایتون 3 یک زبان برنامه نویسی واقعا همه کاره است که دوستش دارم هم برای توسط توسعه دهندگان وب web developers، دانشمندان داده data scientists و ...

10 وب سایت برای حل تمام سوالات مربوط به برنامه نویسی

10 وب سایت برای حل تمام سوالات مربوط به برنامه نویسی

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

APEX_ZIP : مدیریت فایل های Zip از PL/SQL

APEX_ZIP : مدیریت فایل های Zip از PL/SQL

در این قسمت از آموزش مقاله زمیوس در بخش دیتابیس قصد داریم مجدد با یکی از قابلیت های APEX آشنا شویم در این مقاله با استفاده از پکیج APEX_ZIP ...