کشیدن و رها کردن در html چیست؟
آموزش APIs درس دوم
کشیدن و انداختن
کشیدن و رها کردن یک ویژگی بسیار رایج است. این زمانی اتفاق می افتد که شما “شیء” را جابجا کنید و آن را به مکان دیگری بکشید.
در HTML5، کشیدن و رها کردن بخشی از استاندارد است: هر عنصر می تواند draggable (یعنی قابلیت کشیدن داشته باشد ) باشد.
پشتیبانی مرورگر
اعداد مشخص شده در جدول نسخه اول مرورگر است که به طور کامل از کشیدن و رها کردن پشتیبانی می کند.
| API | کروم | اینترنت اکسپلورر | فایرفاکس | سافاری | آپرا |
|---|---|---|---|---|---|
| Drag and Drop | ۴.۰ | ۹.۰ | ۳.۵ | ۶.۰ | ۱۲.۰ |
پشتیبانی مرورگر html5 را از اینجا ببینید
مثال کشیدن و رها کردن
مثال زیر یک مثال ساده از کشیدن و رها کردن است:
<!DOCTYPE HTML> <html> <head> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Afunction%20allowDrop(ev)%20%7B%0A%20%20%20%20ev.preventDefault()%3B%0A%7D%0A%0Afunction%20drag(ev)%20%7B%0A%20%20%20%20ev.dataTransfer.setData(%22text%22%2C%20ev.target.id)%3B%0A%7D%0A%0Afunction%20drop(ev)%20%7B%0A%20%20%20%20ev.preventDefault()%3B%0A%20%20%20%20var%20data%20%3D%20ev.dataTransfer.getData(%22text%22)%3B%0A%20%20%20%20ev.target.appendChild(document.getElementById(data))%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
این ممکن است به نظر پیچیده باشد ، اما اجازه می دهد تا از این طریق به تمام قسمت های مختلف یک رویداد کشیدن و رها کردن بروید.
عنصر Draggable را ایجاد کنید
اول از همه: برای ایجاد یک element draggable،(یعنی عنصری که قابلیت کشیدن و انداختن را داشته باشد ) ویژگی draggable را به true تنظیم کنید:
<img draggable="true">
چه عنصری برای کشیدن است – ondragstart و setData ()
سپس، مشخص کنید چه اتفاقی می افتد وقتی عنصر ی کشیده می شود.
در مثال بالا، attribute ondragstart یک تابع را فراخوانی می کند، drag (event)، که مشخص می کند چه اطلاعاتی کشیده می شود.
روش dataTransfer.setData () نوع داده و مقدار داده های کشیده شده را تنظیم می کند:
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
در این مورد، نوع داده “text” است و مقدار شناسه عنصر draggable ، مقدار (“drag1”) می باشد.
عمل انداختن چطور انجام می شود – ondragover
رویداد ondragover مشخص می کند که کدام داده می تواند انداخته شود.
به طور پیش فرض، داده ها / عناصر را نمی توان در عناصر دیگر انداخت. برای اجازه به انداختن، ما باید از رفتار پیش فرض عنصر جلوگیری کنیم.
این کار با فراخوانی روش event.preventDefault () برای رویداد indragover انجام می شود:
event.preventDefault()
عمل کشیدن و انداختن را انجام دهید.
هنگامی که داده های کشیدن را رها می کنیم ، عمل رها کردن اتفاق می افتد.
در مثال بالا، ویژگی atdrop یک تابع drop(event) را فراخوانی می کند :
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
توضیح کد:
call preventDefault () را فراخوانی کنید تا مانع از این شود که مرورگر به صورت پیش فرض به داده ها دسترسی داشته باشد (به طور پیش فرض به عنوان لینک برای انداختن باز است)
داده های کشیده شده را با روش dataTransfer.getData () دریافت کنید. این روش هر نوع اطلاعاتی را که در روش setData () برای همان نوع تنظیم شده را بازمی گرداند.
داده کشیده شده، شناسه عنصر کشیده شده است (drag1)
عنصر کشیده شده را به عنصر رها شده اضافه کنید.
