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

یکی از ویژگی‌های هیجان انگیز HTML5 ، کشیدن و رهاکردن یا Drag and Drop است. با استفاده از JavaScript و HTML می‌توانید به سادگی در هر قسمت از وبسایت یا اپلیکیشن این ویژگی را به کار ببرید.

این قابلیت اکنون در تمامی مرورگرها قابل استفاده است. مرورگر کروم از نسخه 6 به بعد، فایرفاکس از 3.5 به بعد، اینترنت اکسپلورر از 7 به بعد و آندروید از 2.1 به بالا این ویژگی را پشتیبانی می‌کنند.

قابلیت کشیدن و رها کردن برای دو عمل اصلی قابل استفاده است.
1) کشیدن یک عنصر به داخل عنصر دیگر در همان صفحه
2) کشیدن فایل از سیستم کاربر به داخل مرورگر و آپلود آن

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

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

برای انجام کار کافیست سه مرحله زیر را طی کنید:

1- خصیصه draggable را با مقدار true به آن عنصری از صفحه که مایلید قابلیت کشیده‌شدن را داشته باشد، اختصاص دهید.
مثال :

<img src=”images/example.jpg”  id=”example_img” draggable=”true”>

2- یک event listener برای رویداد dragstart بنویسید که بر روی هر عنصر draggable در صفحه اعمال شود. این تابع زمانی اجرا می‌شود که عنصر توسط کاربر کلیک و کشیده شود. (می‌توان در این مرحله id تگ کشیده شده را در یک متغیر سراسری ریخت تا بعدا قابل تشخیص باشد.)
مثال 1:

$(“#example_img”).bind(“dragstart”,function(){

// do something

});

3- حال باید برای عناصری که قرار است این عنصر را بپذیرند دو event listener تعریف کنید که دو رویداد را درگیر خواهند کرد. برای مثال ما تگ p را انتخاب کردیم. رویداد dragover زمانی که موس، عنصر را روی یک تگ ببرد و رویداد drop زمانی که عنصر رها شود، اتفاق می‌افتد.(به وسیله اشاره گر this می‌توانید تگ کنونی را در داخل تابع شناسایی کنید.)

مثال:

$(“p”).bind(“dragover”,function(){

// do something

});

$(“p”).bind(“drop”,function(){

// do something

});

جهت مشاهده یک مثال کامل روی اینجا کلیک کنید.

این مقاله حالت دوم را که با file api به وجود می آید توضیح داده است.