سحب وإسقاط جزء من معيار HTML5.
اسحب الصورة أعلاه في المستطيل.
في HTML
وتشمل HTML5 مشروع مواصفات العمل ودعم السحب والإسقاط. HTML5 يدعم أنواع مختلفة من سحب واسقاط الميزات بما في ذلك:
- سحب وإسقاط النصوص ورموز HTML
- سحب وإسقاط عناصر HTML
- سحب وإسقاط الملفات
وبناء على الإجراءات اللازمة، أحد أنواع المذكورة أعلاه يمكن استخدامها. لاحظ أنه عندما يتم سحب عنصر HTML لتحريك الموقف الحالي، يتم إرسال المعرف الخاص به إلى العنصر الأصل المقصد؛ لذلك يرسل النص ويمكن اعتبار المجموعة الأولى.
تطبيق البريد الإلكتروني على شبكة الإنترنت جوجل جوجل يدعم السحب والإفلات من الصور والمرفقات في أحدث متصفح جوجل كروم وأبل سفاري (5.X). بحث Google وصورة يدعم السحب والإسقاط.
السحب والإسقاط
السحب والإسقاط هو سمة شائعة جدا. ومن عند "grab" كائن واسحبه إلى موقع آخر.
في HTML5، السحب والإسقاط هو جزء من معيار، وأي عنصر يمكن أن يكون قابل للسحب.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل السحب والإسقاط.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.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 السمة إلى true :
<img draggable="true">
ماذا اسحب - ondragstart و setData()
ثم، حدد ما يجب أن يحدث عند سحب عنصر.
في المثال أعلاه، ondragstart تدعو سمة وظيفة، drag(event) ، الذي يحدد ما هي البيانات إلى أن ننجر.
و dataTransfer. setData() dataTransfer. setData() طريقة تحدد نوع البيانات والقيمة من البيانات جره:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
في هذه الحالة، ونوع البيانات "text" والقيمة هو معرف العنصر القابل للسحب ("drag1") .
حيث لإسقاط - ondragover
و ondragover يحدد الحدث حيث يمكن إسقاط البيانات جر.
افتراضيا، / عناصر لا يمكن إسقاط البيانات في عناصر أخرى. للسماح للهبوط، يجب علينا منع معالجة الافتراضي للعنصر.
ويتم ذلك عن طريق استدعاء event. preventDefault() event. preventDefault() طريقة ل ondragover الحدث:
event . preventDefault()
هل قطرة - ondrop
عندما يتم إسقاط البيانات جر، يحدث حدث الهبوط.
في المثال أعلاه، ondrop السمة باستدعاء وظيفة، drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
وأوضح الرمز:
- استدعاء preventDefault() لمنع التعامل مع المتصفح الافتراضي للبيانات (default is open as link on drop)
- الحصول على البيانات جره مع dataTransfer. getData() dataTransfer. getData() الأسلوب. هذا الأسلوب سيعود أية بيانات التي تم تعيينها إلى نفس النوع في setData() طريقة
- البيانات جره هو معرف العنصر جر ("drag1")
- إلحاق العنصر تنجر drop عنصر
السحب صورة ذهابا وإيابا
كيفية سحب (and drop) صورة ذهابا وإيابا بين <div> العناصر.