کشیدن و رها کردن HTML5

لطفاً تصویر CodeW3C.com را به مستطیل بکشید.

بندھرن اور رکھنا

بندھرن اور رکھنا (Drag و Drop) ایک عام خصوصیت ہے۔ یہ کہتا ہے کہ آپ کچھ چیز کو کسی دوسرے مقام پر لے جاتے اور رکھتے ہیں。

بندھرن اور رکھنا، HTML5 معیار کا حصہ ہے: کسی بھی عنصر کو بندرنا بناکر رکھا جاسکتا ہے.

براوزر سپورٹ

جداول میں کی گئی اعداد، بندھرن اور رکھنا کو پورا طور پر سپورٹ کرنے والی پہلی براوزر کی نسلی نشانات کی بنیاد پر ہیں.

API
بندھرن اور رکھنا 4.0 9.0 3.5 6.0 12.0

HTML بندھرن اور رکھنا مثال

درج ذیل، بندھرن اور رکھنا کا ایک سادہ مثال ہے:

مثال

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

آزمایش کنید

یہ ممکن ہیں کہ یہ کچھ پیچیدہ دکھائی دیں، لیکن ہم کچھ بندھرن اور رکھنا واقعات کی تمام مختلف حصوں کو جائزو میں لائیں گے。

عنصر کو بندرنا بناکر

ابتداً: ایک عنصر کو بندھرنا بناکر، draggable خصوصیت کو صحیح طور پر مقرر کریں:

<img draggable="true">

بندھرن اور رکھنا کا محتوا - ondragstart اور setData()

بعد ازاں، کیا بندھرلی اعداد کو تلاش کیا جائے گا کے بارے میں مقرر کرنا شروع کیا جاتا ہے。

در مثال بالا میں، ondragstart خصوصیت نے drag(event) فونکشن کو سکھایا ہے، تاکہ کیا بندھرلی اعداد کو تلاش کیا جائے۔

dataTransfer.setData() مہم کو کچھ بندھرلی اعداد کا نوعیت اور قیمت مقرر کرتی ہے:

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

یہ مثال میں، اعداد کا نوعیت "text" ہے، اور یہ کچھ بندھرلی عنصر کا آئی ڈی ("drag1") کی قیمت ہے。

کجا رها کنم - ondragover

رویداد ondragover مشخص می‌کند که داده‌های کشیده شده کجا می‌توانند قرار گیرند.

به صورت پیش‌فرض، داده‌ها/عناصر نمی‌توانند در داخل عناصر دیگر قرار گیرند. برای انجام کشیدن و رها کردن، باید این روش‌های پیش‌فرض عناصر را جلوگیری کنیم.

این وظیفه توسط روش preventDefault() رویداد ondragover انجام می‌شود:

event.preventDefault()

پایان قرار دادن - ondrop

وقتی داده‌های کشیده شده رها می‌شوند، رویداد drop رخ می‌دهد.

در مثال بالا، ویژگی ondrop یک تابع فراخوانی کرده است، drop(event):

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

توضیح کد:

  • با فراخوانی preventDefault() از روش‌های پیش‌فرض مرورگر برای پردازش داده‌ها جلوگیری کنید (رفتن به لینک‌های پیش‌فرض در رویداد drop)
  • با استفاده از روش getData() از dataTransfer داده‌های کشیده شده را به دست آورید. این روش هر نوع داده‌ای که در setData() با همان نوع داده تنظیم شده باشد را بازمی‌گرداند
  • داده‌های کشیده شده شناسه عنصر کشیده شده است ("drag1")
  • عنصر کشیده شده را به عنصر قرار داده شده اضافه کنید

مثال‌های بیشتر

کشیدن و رها کردن تصویر

چگونه می‌توانم تصویر را بین دو عنصر <div> به حرکت درآورم:

لطفاً تصویر CodeW3C.com را به مستطیل بکشید.

آزمایش کنید