English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
拖放（Drag و drop）是 HTML5 标准的组成部分。
将 oldtoolbag.com 图标拖动到矩形框中。
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, و Safari 支持拖动。
注意:Safari 5.1.2不支持拖动.
下面的示例是一个简单的拖放示例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础教程(oldtoolbag.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<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>
<p>سحب صورة oldtoolbag.com إلى الصندوق المربع:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/static/images/logo-n.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>اختبار النتيجة ‹/›قد يبدو هذا معقدًا، ولكن يمكننا دراسة أجزاء أحداث السحب والوضع بشكل منفرد.
أولاً، لجعل العنصر قابل للسحب، قم بتعيين خاصية draggable إلى true:
<img draggable="true">
ثم، يتم تحديد ما يحدث عند سحب العنصر.
في المثال السابق، تم استدعاء دالة ondragstart باستخدام ondragstart(event)، والتي تحدد البيانات المُسحوبة.
يُحدد طريقة dataTransfer.setData() نوع البيانات والمقدار للبيانات المُسحوبة:
function drag(ev)
{
ev.dataTransfer.setData("Text", ev.target.id);
}
Text هو DOMString يمثل نوع البيانات المُسحوبة التي يتم إضافتها إلى عنصر السحب. القيمة هي id العنصر القابل للسحب ("drag1").
يحدد حدث ondragover أين يمكن وضع البيانات المُسحوبة.
بافتراض، لا يمكن وضع البيانات/العناصر في عناصر أخرى. إذا كنت بحاجة إلى تعيين السماح بالوضع، يجب علينا منع معالجة العنصر بشكل افتراضي.
هذا يتم عن طريق استدعاء طريقة event.preventDefault() لحدث ondragover:
event.preventDefault()
يحدث حدث drop عند وضع البيانات المُسحوبة.
في المثال السابق، تم استدعاء دالة ondrop باستخدام ondrop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
توضيح الكود:
دعوة preventDefault() لتجنب معالجة المتصفح للبيانات بشكل افتراضي (سلوك افتراضي لحدث drop هو فتح الروابط)
الحصول على البيانات المحملة باستخدام طريقة dataTransfer.getData("Text"). هذه الطريقة ستعود أي بيانات تم تعيينها بنفس النوع في طريقة setData().
بيانات السحب هي id العنصر المحمل ("drag1")
إضافة العنصر المحمل إلى العنصر الموضع (العنصر المستهدف)
سحب وإفلات الصور في HTML5
كيفية سحب الصورة وإفلاتها بين عناصر <div>.