‎‎كشيدن ورها كردنHTML Drag and Drop API -‎

Previous >    <Next  

‎‎درHTML هر عنصري ميتوان كشيده ورها شود(Drag and Drop)

‎‎مثال ـ در نمونه زير عملdrag and drap را انجام دهيد .

W3Schools

‎‎در مثال بالا محتوي باكس پر را بخالي انتقال دهيد.

‎‎كشيدن و رهاكردنDrag and Drop -‎

‎كشيدن ورها كردن يكي از ويژگي هاي بسيار رايج است .زماني كه يك شي راگرفته وآنرا درمكان ‎ديگري رها ميكنيد.

‎‎پشتيباني مرورگرهاBrowser Support -‎

‎‎اعداد در جدول زير نشان دهنده اولين نسخه مرورگراست كه ازDrag and Drop پشتيباني ميكند.

‎
‎API‎ ‎Chrome‎ ‎Edge‎ ‎Firefox‎ ‎Safari‎ ‎Opera‎
‎Drag ang Drop‎ ‎‎4.0‎ ‎‎9.0‎ ‎‎3.5‎ ‎‎6.0‎ ‎‎12.0‎

‎‎مثال ـDrag and Drop

‎‎مثال زير يك نمونه ساده ازDrag and Drop است .

‎ 

<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>

--(go to editor for change code and run)

‎ممكن است كه پيچيده به نظر آيد، اما اجازه دهيد كه بخشهاي مختلف اين رويداد را بدنبال مرور ‎نمائيم.

‎‎ساخت يك عنصر قابل كششMake an Element Draggable -‎

‎اولين كار بايد عنصري قابل كشيدن تعريف شود .ويژگي‎draggable‎ براي معرفي ‎عنصر قابل كشش استفاده ميشود .اگر بصورت‎draggabl=‎"true‎"‎ تنظيم گردد، آن ‎قابليت را پيدا ميكند .مطابق نمونه زير:

‎<img draggable=‎"true‎">‎‎

‎What to Drag -‎ ondragstart and setData()‎‎

‎در كشيدن عنصر چه اتفاقي بايد بافتد .براي مشخص نمودن اتفاق از ويژگي ‎ondragstart‎‎در عنصر استفاده ميشود .مقدار اين ويژگي عمل مورد نظر را مشخص ‎مشخص مي نمايد .دراين مثل آن بصورت‎ondragstart=‎"drag(event)‎"‎ تنظيم گرديده ‎كه نشانده فعال شدن تابعdrag(event) است .

‎‎تابعevent()‎ بصورت زير است .

‎ 
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

‎تابعdrag(ev) شي ايجاد شده(ev ) ‎را دريافت ميكند .اين شي داراي متدdataTransfer.setdata()‎ است كه تنظيم كننده نوع ديتا و ‎مقدارdrag شده ميباشد .در اين مثال نوع ديتا ‎"text‎"‎ ‎ومقدار آن ازid عنصر كشيده شده‎"drag1‎"‎ ‎ميباشد.

‎‎كشيده شده كجا رها شودWhere to Drop -‎ ondragover -‎

‎‎ويژگيondragover مشخص ميكند كه كشيده شده كجا بايد رها شود .

‎بصورت پيش فرضdata/element را نميتوان در عنصر ديگر حذف كرد .براي اجازه دادن بايد از مديريت ‎پيش فرض جلوگيري شود.

‎اين عمل بوسيله بكارگيري متد‎event.preventDefault()‎‎ درondragover event انجام ‎ميشود .مطابق فرمت زير:

‎event.preventDefault()‎‎

‎‎اقدام رها كردنDo the Drop -‎ ondrop -‎

‎هنگاميكه داده هاي كشيده شده رها ميشود يك رويداد برايdrop پيش مي آيد .در مثال بالا ويژگي ‎ondrop‎‎رويداد را مشخص مي نمايد كه دراينجا تابعdrop(event) است .مطابق زير:

‎ 
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

‎‎مثالهاي بيشتر

‎‎مثال ـ چگونه يك تصوير را بين دو عنصرdrag and drop كنيم

--(go to editor for change code and run)

Previous >    <Next