میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

Drag و Drop در HTML

آشنایی با Drag و Drop یا بکش و رها کن در HTML

کشیدن و رها کردن یا Drag و Drop یکی از رایج ترین ویژگی های کار با کنترل ها است. در این نوع حرکت کاربر ابتدا یک شی را می گیرد و سپس با کشیدن و رها کردن آن در مکان دیگر مکان آن را تغییر می دهد.

در html5، عملکرد کشیدن و رها کردن جزء استاندارد این نسخه است. همه عناصر قابل کشیدن هستند.

به مثال زیر توجه کنید :

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

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>

<img id=”drag1″ src=”img.png” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>

 

 

فعال کردن ویژگی کشیدن در عنصر

قبل از هر چیزی باید عنصر مورد نظر را قابل کشیدن کنیم با خاصیت draggable و مقدار true این مسئله حل می شود.

<img draggable=“true”>

 

 

چه چیزی بکشیم – ondragstart و setdata

پس از فعال کردن ویژگی کشیدن، باید تعیین کنیم چه عملی در هنگام کشیدن عنصر انجام شود. در مثال ابتدای مقاله،  خاصیت ondragstart یک تابع را صدا زده می شود(drag) که تعیین می کند چه داده ای باید کشیدن شود.

تابع datatransfer.setdata نوع داده و مقدار داده کشیده شده را تعیین می کند.

function drag(ev) {   ev.dataTransfer.setData(“text”, ev.target.id); }

در این مثال، نوع داده “text” است و مقدار آن شناسه عنصر قابل کشیدن.

 

 

کجا رها کنیم – ondragover

در رویداد ondragover، رویداد تعیین می کند کجا داده ها باید رها شوند.

به صورت پیش فرض، داده یا عنصر مورد نظر نمی توانند در سایر عناصر رها شوند. برای دادن اجازه رها سازی برروی سایر عناصر باید مانع اجرای پیش فرض رویداد رها کردن در عنصر مقصد شویم.

این مشکل با فرخوانی event.preventdefault در رویداد ondragover حل می شود:

event.preventDefault()

 

 

انجام رها سازی – ondrop

هنگامی که داده ها رها می شوند، یک رویداد رها سازی اجرا می شود.

در مثالی که در بالا آورده بودیم، تابع ondrop یک تابع به نام drop را که در پایین آورده ایم صدا می‌زند.

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

فرخوانی preventdefault برای ممانعت از اجرای پیش فرض مدیریت داده(به صورت پیش فرض بازکردن به عنوان لینک در هنگام رها سازی).

دریافت داده های کشیده شده توسط تابع datatransfer.getdata. این تابع هر داده ای که برای تابع setdata تنظیم شده است را با همان نوع داده ای بازگشت می دهد.

داده رویداد کشیده شدن در واقع شناسه عنصر کشیده شده است.

چسباندن عنصر کشیده شده در عنصر رها شده.

 

 

 

امیدواریم این بخش از آموزش در مورد Drag و Drop یا بکش و رها کن در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

بیشتر
تگ head در html
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟