در جلسه قبلی آموزش HTML با موقعیت جغرافیایی (geolocation) در html5 آشنا شدیم. در این بخش به کشیدن و رها کردن در html5 خواهیم پرداخت.
قابلیت کشیدن و رها کردن در html5 (drag & drop)، بصورت ذاتی پشتیبانی می شود.
المان Drag & Drop
ویژگی drag & drop به کاربر امکان کشیدن و انداختن یک عنصر به مکان دیگر را، میدهد. مکانِ رها کردن (drop) ممکن است نرم افزار کاربردیِ متفاوتی باشد. با کشیدن (dragging) یک عنصر ، نمایشی کدر و غیر شفاف از عنصر، اشاره گر ماوس را دنبال می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5 Drag & Drop</title> <script type="text/javascript"> function dragStart(e){ // Sets the operation allowed for a drag source e.dataTransfer.effectAllowed = "move"; // Sets the value and type of the dragged data e.dataTransfer.setData("Text", e.target.getAttribute("id")); } function dragOver(e){ // Prevent the browser default handling of the data e.preventDefault(); e.stopPropagation(); } function drop(e){ // Cancel this event for everyone else e.stopPropagation(); e.preventDefault(); // Retrieve the dragged data by type var data = e.dataTransfer.getData("Text"); // Append image to the drop box e.target.appendChild(document.getElementById(data)); } </script> <style type="text/css"> #dropBox{ width: 300px; height: 300px; border: 5px dashed gray; background: lightyellow; text-align: center; margin: 20px 0; color: orange; } #dropBox img{ margin: 25px; } </style> </head> <body> <h2>Drag & Drop Demo</h2> <p>Drag and drop the image into the drop box:</p> <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);"> <!--Dropped image will be inserted here--> </div> <img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites"> </body> </html> |
نکته: می توانید یک عنصر را با تنظیم خصوصیت draggble آن با true، قابل drag کردن کنید، مثل draggable="true". با این حال، در بیشتر مرورگرها، انتخاب های متنی، عکس ها، و لنگرگاه های عناصرِ دارای خصوصیت href ، بصورت پیش فرض قابل درگ کردن هستند.
رویداد Drag and Drop
در مراحل مختلفِ عمل کشیدن و رها کردن، تعدادی رویداد اجرا می شوند. ولی رویداد های ماوس مثل mousemove، در زمان انجام عمل کشیدن، اجرا نمیشوند.
جدول زیر مرور کوتاهی است بر تمام رویداد های کشیدن و رها کردن:
| رویداد (Event) | توضیحات |
| ondragstart | زمانی که کاربر شروع به کشیدن (Dragging) عنصر کند، اجرا میشود |
| ondragenter | زمانی که یک عنصر قابل کشیدن، ابتدا به یک drop listener جابه جا شود، اجرا میشود |
| ondragover | زمانی که کاربر یک عنصر را روی یک drop listener می کشد، اجرا میشود |
| ondreagleave | زمانی که کاربر یک عنصر را به بیرون از یک drop listener می کشد، اجرا میشود. |
| ondrag | زمانی که کاربر عنصری را به هر جایی بکشد، اجرا می شود؛ بصورت مدام اجرا میشود ولی می تواند مختصات X و Y اشاره گر ماوس را بدهد. |
| ondrop | زمانی که یک عنصر را بصورت موفقیت آمیز در یک drop listener رها می کند، اجرا میشود. |
| ondragend | زمانی که عمل کشیدن تمام شود، چه موفقیت آمیز باشد، چه نباشد، اجرا میشود. این رویداد زمان کشیدنِ یک فایل از صفحه ی دسکتاپ به مرورگر، اجرا نمیشود. |
نکته: تمام مرورگرهای مطرح و مدرن مثال Firefox، Chrome، Opera، Safari و Internet Explorer 9+ از ویژگیِ drag and dropدر HTML5 پشتیبانی می کنند.
امیدوارم در این بخش آموزش HTML , از کشیدن و رها کردن در html5 نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
سلام وقتی که من چند تا شی داشته باشم و بخوام هر کدوم رو توی یکی از خونه های یه جدول یا محلی قرار بدم چطور میتونم اون تغییر رو ذخیره کنم چون با رفرش دوباره همه چیز بر میگرده سر جای خودش!!!
سلام. با استفاده از کوکی Cookie ها میتونید این رو داخل مرورگر ذخیره کنید:
آموزش کوکی ها در جاوا اسکریپت
موفق باشید.