Drag and Drop در HTML5

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه 01 آذر 1399
Drag and Drop

Drag and Drop API در HTML5 به شما  این  امکان را می دهد با استفاده از مکان نما ، یک شی HTML را بگیرید و آن را به مکان دیگری بکشید.

چه چیزی می توانید در HTML5 بکشید و رها کنید؟

HTML5 به شما امکان می دهد هر عنصر را با قابلیت کشیدن تبدیل کنید ، به شما این امکان را می دهد که آن را با مکان نما انتخاب کرده و به مکان دیگری بکشید که به عنوان یک عنصر قابل انعطاف تعریف می شود. در مثال زیر ، سعی کنید یک تصویر را به یک مربع بکشید:

function allowDropThis(i) {
  i.preventDefault();
}

function dragThis(i) {
  i.dataTransfer.setData("doggo", i.target.id);
}

function dropThis(i) {
  i.preventDefault();
  var data = i.dataTransfer.getData("doggo");
  i.target.appendChild(document.getElementById(data));
}

این قابلیت تجربه کاربر را ساده می کند و حتی امکان ایجاد بازی های آنلاین ساده را فراهم می کند (به عنوان مثال می توانید قطعات شطرنج مجازی را بکشید و رها کنید). وقتی یک عنصر را می کشید ، ماکت شفاف آن همراه با مکان نما حرکت می کند تا اینکه با رها کردن دکمه ماوس آن را رها کنید.

از نظر فنی ، Drag and Drop یک JavaScript API است که به HTML5 اضافه شده است. بنابراین ، داشتن حداقل دانش اولیه اسکریپت نویسی مهم است تا بتوانید با این قابلیت کار کنید.

رویدادها برای Drag and Drop در HTML5

در جدول زیر ، همه وقایع مربوط به قابلیت Drag and Drop را مشاهده خواهید کرد:

توضیحاترویداد
مکان نما هنگام کشیدن یک عنصر حرکت می کندdrag
روند کشیدن تمام می شودdrop
مکان نما عنصر را برداشته و شروع به کشیدن می کندdragstart
دکمه ماوس آزاد می شود ، عنصر رها می شودdragend
مکان نما به عنصر هدف وارد می شودdragenter
مکان نما عنصر مورد نظر را ترک می کندdragleave
مکان نما بر روی عنصر هدف حرکت می کندdragover

توضیح مرحله به مرحله Drag and Drop در HTML

کدگذاری Drag and Drop در HTML5 در نگاه اول کاملاً پیچیده به نظر می رسد زیرا شامل اسکریپت نویسی در JS است. با این حال ، بیایید هر قسمت از فرآیند را مطالعه کنیم تا درک آن آسان تر شود.

عناصر قابل جمع شدن

ابتدا باید مطمئن شوید که عنصری که می خواهید بکشید دارای ویژگی قابل کشیدن HTML5 است و مقدار آن روی true تنظیم شده است:

<img draggable="true">

کشیدن

سپس ، مشخص کنید بعد از کشیدن یک شی چه اتفاقی می افتد. شما می توانید این کار را با فراخوانی یک کنترل کننده رویداد برای یک رویداد dragstart و تعریف یک تابع برای اجرا انجام دهید.

مقدار و نوع داده داده های کشیده شده باید توسط روش dataTransfer.setData  تنظیم شود.

function dragThis(i) {
  i.dataTransfer.setData("doggo", i.target.id);
}

رها کردن

داده های قابل کشیدن HTML5 با ضمیمه کردن یک کنترل کننده رویداد به رویداد dragover مشخص می شوند.

به طور پیش فرض نمی توان عناصر و داده ها را در سایر عناصر کاهش داد. این بدان معناست که شما باید با استفاده از روش event.preventDefault() رفتار پیش فرض عنصر را متوقف کنید:

event.preventDefault();

هنگامی که داده های قابل کشیدن HTML5 حذف می شوند ، یک رویداد جدید رخ می دهد. توسط دستیار رویداد ondrop فراخوانی می شود:

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

کد نهایی: یک مثال

اساساً ، برای اینکه بتوانید چهار مرحله را انجام دهید ، به کد خود نیاز دارید:

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

بیایید ببینیم که در مثال زیر چگونه کار می کند:

<!DOCTYPE HTML>
<html>
<head>
<script>
 function allowDropThis(i) {
   i.preventDefault();
 }

 function dragThis(i) {
   i.dataTransfer.setData("doggo", i.target.id);
 }

 function dropThis(i) {
   i.preventDefault();
   var data = i.dataTransfer.getData("doggo");
   i.target.appendChild(document.getElementById(data));
 }
</script>
</head>
<body>

<h2>Drag and Drop</h2>

<p>Drag Doggo between these the two elements.</p>

<div id="fig1" ondrop="dropThis(event)" ondragover="allowDropThis(event)">
  <img src="https://cdn.bitdegree.org/learn/pom-laptop.png?raw=true" draggable="true" ondragstart="dragThis(event)" id="drag1" width="220" height="220">
</div>

<div id="fig2" ondrop="dropThis(event)" ondragover="allowDropThis(event)"></div>

</body>
</html>

نکات مهم Drag and Drop در HTML5

  • می توانید انواع مختلفی از عناصر را بکشید ، از جمله فایل ها ، پیوندها ، تصاویر و متن ، اما نه محدود به آن ها.
  • شما همچنین می توانید چندین عنصر را همزمان بکشید. با این حال ، توصیه می شود همه آنها در یک قالب برای سازگاری وجود داشته باشد.
  • عناصر فرم که ورودی کاربر را می پذیرند به طور پیش فرض می توانند مناطق قابل انعطاف باشند.

پشتیبانی از مرورگر

در مرورگر های، opera، firefox ، saffari ،chrome، ie وidge پشتیبانی میشود.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 0
[ 0 رای ]
مطالب مشابه

Related Posts