تعليق: قبل HTML5 ، لتنفيذ عمليات السحب والإسقاط لعناصر صفحة الويب ، كان من الضروري الاعتماد على Mousedown و Mousemove و Mouseup و APIs الأخرى لتنفيذها من خلال كمية كبيرة من رمز JS. الآن يقوم HTML5 بتبسيط صعوبة عمليات السحب وإسقاط عناصر صفحة الويب. بالإضافة إلى دعم السحب وإسقاط العناصر داخل المتصفح ، تدعم واجهة برمجة التطبيقات أيضًا سحب البيانات بين المتصفح والتطبيقات الأخرى.
قبل HTML5 ، لتنفيذ عمليات السحب والإسقاط لعناصر صفحة الويب ، نحتاج إلى الاعتماد على موسى ، موسميوف ، الماوس وغيرها من واجهات برمجة التطبيقات لتنفيذها من خلال كمية كبيرة من رمز JS ؛ يقدم HTML5 واجهة برمجة تطبيقات تدعم عمليات السحب والإفلات مباشرة ، والتي تبسط بشكل كبير صعوبة برمجة عمليات السحب وإسقاط عناصر صفحة الويب. بالإضافة إلى دعم السحب وإسقاط العناصر داخل المتصفح ، تدعم واجهات برمجة التطبيقات هذه أيضًا سحب البيانات بين المتصفح والتطبيقات الأخرى.
تستخدم هذه المقالة مثالًا بسيطًا لتوضيح كيفية استخدام APIs السحب وإسقاط واجهات برمجة التطبيقات في HTML5.
مشهد:
كما هو موضح في الشكل أدناه ، نريد تنفيذ:
اسحب الصورة من منطقة الألبوم الأيسر إلى منطقة القمامة اليمنى عن طريق السحب والإسقاط ؛ أثناء عملية السحب ، يجب تذكير جزء التذكير الدافئ على الفور ، ويتم تنفيذ عملية السحب والإفلات حاليًا ؛
طريقة التنفيذ:
كما هو موضح في الواجهة أعلاه ، يكون رمز HTML بسيطًا نسبيًا ، على النحو التالي:
<! doctype html>
<html>
<head>
<title> HTML5 ينفذ عملية السحب والإفلات </title>
<meta charset = "utf-8"/>
<style>
.album
{
الحدود: 3px متقطع #CCC ؛
تعويم: اليسار.
الهامش: 10px ؛
MINIight: 100px ؛
الحشو: 10 بكسل ؛
العرض: 220 بكسل ؛
}
</style>
</head>
<body ">
<viv>
<h2> تذكير دافئ: يمكنك سحب الصور مباشرة إلى سلة المهملات </h2>
</div>
<viv>
<h2> الألبوم </h2>
<img draggable = "true" src = "img /bg_01.png" />
<img draggable = "true" src = "img /bg_02.png" />
<img draggable = "true" src = "img /bg_03.png" />
</div>
<viv>
<h2> يمكن أن تكون المهملات </h2>
</div>
<br/>
</body>
</html>
ملاحظة: إذا كنت ترغب في تنفيذ عمليات السحب والإفلات ، فأنت بحاجة إلى إضافة السمة القابلة للسحب = السمة الحقيقية للعناصر المراد سحبها وإسقاطها ؛
بعد ذلك ، أضف رمز JS التالي إلى حدث Onload. التعليقات أكثر تفصيلًا ولن يتم شرحها بشكل منفصل.
<script>
وظيفة init () {
var info = document.getElementById ("info") ؛
// الحصول على عناصر السحب والإسقاط. هذا المثال هو div حيث يوجد الألبوم.
var src = document.getElementById ("الألبوم") ؛
// ابدأ عملية السحب وإسقاط التشغيل
src.ondragstart = function (e) {
// احصل على معرف صورة السحب والانتعاش
var dragimgid = e.target.id ؛
// الحصول على عنصر سحب
var dragimg = document.getElementById (dragimgid) ؛
// تنتهي عملية السحب والإفلات
dragimg.ondragend = function (e) {
// استعادة رسالة التذكير
info.innerhtml = "<h2> تذكير إبداعي: يمكنك سحب الصور مباشرة إلى القمامة يمكن </h2>" ؛
} ؛
e.datatransfer.setData ("text" ، dragimgid) ؛
} ؛
// عملية السحب والإفلات
src.ondrag = function (e) {
info.innerhtml = "<h2>-يتم سحب الصورة-</h2>" ؛
}
// احصل على العنصر المستهدف السحب وإسقاط
var target = document.getElementById ("trash") ؛
// أغلق المعالجة الافتراضية ؛
Target.OndRagenter = function (e) {
E.PreventDefault () ؛
}
Target.OndRagover = function (e) {
E.PreventDefault () ؛
}
// شيء يسحب ويسقط إلى العنصر المستهدف
target.ondrop = function (e) {
var draggedid = e.datatransfer.getData ("text") ؛
// احصل على كائن DOM في الألبوم
var oldelem = document.getElementById (draggedid) ؛
// حذف عقدة الصورة من الألبوم div
oldelem.parentnode.removechild (Oldelem) ؛
// أضف عقدة DUM DOM التي تم سحبها إلى Div Trash ؛
Target.AppendChild (Oldelem) ؛
info.innerhtml = "<h2> تذكير إبداعي: يمكنك سحب الصور مباشرة إلى القمامة يمكن </h2>" ؛
E.PreventDefault () ؛
}
}
</script>
إدراك التأثير: