مارس السحب وإسقاط API في HTML5 لتحقيق قائمة السحب والإفلات! المادة المرجعية: JS HTML5 اسحب وإسقاط معاينة صورة التحميل
تطبيق HTML5 السحب وإسقاط قائمة الهاتف المحمول:
1. حلقة لتعيين السمة القابلة للسحب لكل طفل ، وتعيين علامة السحب (لن يتم نقل أكثر من طفل أو جميع الأطفال)
2. في كل مرة تدخل فيها منطقة التسليم ، سيكون هناك علامة السحب والإفلات أثناء الكشف ، وإذا كان هناك ، أضف عنصر DOM ، وما إلى ذلك.
فكرة تنفيذ أخرى هي: يمكنك استخدام كائن DataTransfer في السحب والإسقاط كخاصية ، واستخدام أساليب setData () و getData () لتمرير معرف كل طفل تم سحبه ، والعثور على الطفل المحدد للتحرك ... إلى التجربة. . .
HTML:
// قائمة فارغة <div id = "box"> </viv> // قائمة المحتوى <ul id = "con"> <li> البند 1 </li> <li> البند 2 </li> <li> البند 3 </li> <li> البند 4 </li> </ul>
JS:
<script> function $ (id) {return document.getElementById (id) ؛ } var con = $ ("con") ؛ var box = $ ("box") ؛ var lidoms = document.getElementSbyTagName ("li") ؛ var i = 0 ، len = lidoms.length ؛ // loop لتعيين خاصية draggable لكل طفل ، وسحب العلامة في الوقت المناسب لـ (؛ i <len ؛ i += 1) {lidoms [i] .draggable = 'true' ؛ lidoms [i] .flag = false ؛ lidoms [i] .OndRagStart = function () {this.flag = true ؛ } ؛ lidoms [i] .OndRagend = function () {this.flag = false ؛ } ؛ } // trender event $ ("box"). OnDragenter = function (e) {E.PreventDefault () ؛ console.log ('enter') ؛ } ؛ $ ("box"). OnDragover = function (e) {e.PreventDefault () ؛ console.log ('Move') ؛ } ؛ $ ("box"). OnDragLeave = function (e) {E.PreventDefault () ؛ console.log ('Leave') ؛ } ؛ $ ("box"). OnDragLeave = function (e) {E.PreventDefault () ؛ لـ (var i = 0 ؛ i <lidoms.length ؛ i += 1) {if (lidoms [i] .flag) {box.appendChild (lidoms [i]) ؛ }} console.log ('Success') ؛ } ؛ // trouting area event $ ("con"). OnDrager = function (e) {E.PreventDefault () ؛ console.log ('Enter') ؛ } ؛ $ ("con"). OnDragover = function (e) {e.preventDefault () ؛ console.log ('Move') ؛ } ؛ $ ("con"). OnDragover = function (e) {e.preventDefault () ؛ console.log ('Leave') ؛ } ؛ $ ("con"). OnDrop = function (e) {e.preventDefault () ؛ لـ (var i = 0 ؛ i <lidoms.length ؛ i += 1) {if (lidoms [i] .flag) {// في هذا الوقت ، كائن المربع هو li ، وليس الحاوية الأصلية. $ ("con"). appendChild (lidoms [i]) ؛ }} console.log ('Success') ؛ } ؛ </script>صورة التكاثر:
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.