کشيدن (Drag) و انداختن (Drop) عناصر، بخشی از استاندارد html5 است.
کشیدن و انداختن (drag and drop)
کشیدن و انداختن یکی از ویژگی های بسیار معمول HTML5 است، که در آن شما یک شی را "گرفته" و آن را به مکان های مختلف می کشید.
در HTML5 هر عنصري در صفحه می تواند قابل کشيدن (draggable) باشد.
پشتيبانی در مرورگرهای مختلف
مرورگرهاي Internet Explorer 9+, Firefox, Opera, Chrome, Safari جابه جا کردن عناصر را پشتيباني مي کنند.
توجه: Safari 5.1.2 و نسخه هاي قديمي تر آن، جابه جا کردن عناصر را پشتيباني نمي کنند.
مثال کشيدن و انداختن عناصر در HTML5
مثال زير يک مثال ساده از drag و drop است:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</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>
مثال بالا ممکن است کمي پيچيده بنظر برسد، اما اجازه بدهيد بعد از مرور تمام بخش هاي آن در پايين قضاوت نماييد.
عنصر مورد نظر را قابل جا به جا کردن کنيد
در مرحله اول برای اینکه عنصر مورد نظر قابل جابجا باشد بايد خاصيت drggable را با مقدار true تنظيم نماييد:
تعيين عنصري که مي خواهيد جا به جا شود_ خصوصیت ondragstart و متد ()setData
در مرحله دوم بايد عنصري را که مي خواهيد جا به جا شود و همچنين اتفاقي که پس از کشيدن آن قرار است بيافتد را تعيين نماييد.
در کد بالا، خاصيت ondragstart عنصر <img>، را با رويداد (drag(event تنظيم کرده ايم. اين رويداد تعيين مي کند چه عنصري مي خواهد جابه جا شود. اين رويداد زماني اتفاق مي افتد که شما دکمه موس را بر روي عکس کليک کرده و سعي مي کنيد آن را بکشيد.
متد ()dataTransfer.setData اطلاعات عنصري که قرار است کشيده شود، يعني id آن را دريافت کرده و در حافظه مرورگر قرار مي د هد. اين id از نوع "Text" بوده و مقدار آن در اين مثال drag1 است.
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
تعیین محل رها کردن عنصر مورد نظر_ خصوصیت ondragstart و رویداد ondragover
رويداد ondragover مشخص می کند داده ي جابه جا شده را کجا مي توان رها نمود.
بصورت پيش فرض، عناصر و داده ها را نمي توان جابه جا نمود. بنابراين بايد از اين کار جلوگيري نمود.
اين کار هنگامي که رويداد ondragover اتفاق مي افتد، با صدا زدن متد ()ev.preventDefault انجام مي شود:
رها کردن عنصر جابه جا شده _ خصوصیت ondrop
پس از انتخاب عنصر و جابه جا کردن آن، بايد مکاني که فرود (drop) مي آيد را تعيين کرده و سپس آنرا رها نماييد.
در مثال بالا، هنگامي که عکس را در مکان تعيين شده رها مي کنيد، رويداد ondrop تگ <div> رخ داده و تابع drop را فراخواني مي کند.
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
توضيح کد:
-
از آنجا که بصورت پيشفرض، عناصر و داده ها قابل جابجایی نیستند، با صدا زدن متد ()ev.preventDefault از اين کار جلوگيري مي کنيم.
-
توسط متد ()ev.dataTransfer.getData، شناسه يا همان id عنصر drag شده را دريافت مي کنيم. اين متد شناسه همان نوع داده اي را که در متد ()setData تنظيم کرديد، برمي گرداند.
-
اين id از نوع "Text" بوده و مقدار آن در اين مثال drag1 است.
-
متد ()ev.target.appendChild عنصر انتخاب شده را به تگ div مرتبط مي سازد.