لأنني أرغب في استخدام نماذج السحب والإفلات ، أنا شخصياً أفضل القيام بذلك بنفسي ولا أرغب في استخدام المكونات الإضافية دون فهم التنفيذ أو المبادئ ، لذلك وجدت معلومات لتنفيذ واحدة.
الفكرة: استخدم Mousedown لتحديد ما إذا كان موضع النقر على الماوس هو على عنصر تحكم الزناد. إذا كان الأمر كذلك ، عندما يكون mouseMove ، استنساخ عنصر تحكم ، وقم بتعديل الشفافية ، ثم عند وضعه في الحاوية ، قم بإزالة عنصر التحكم ، وإنشاء وضع في الحاوية (يمكن أن يكون التحكم الموضوق والتحكم في الزناد مختلفًا)
السحب والإفلات: وبالمثل ، عند استخدام Mousedown ، حدد التحكم الذي هو عليه. عندما تكون MouseMove ، تحتاج إلى وضع Div من العناصر الناجحة في الموضع الأصلي ، وتعديل شفافية العنصر وتعيينه على الموقف المطلق لتسهيل السحب. عند السحب ، سيتغير العنصر النائب DIV أيضًا وفقًا لموضع الماوس (الحكم على ما إذا كان موضع الماوس الحالي هو الزاوية اليسرى العليا من التحكم في الحاوية بالإضافة إلى نصف ارتفاع عنصر التحكم). عند وضعه ، يتم استخدام موقع العامل النائب Div لإدخاله. دعونا نلقي نظرة على الكود بالتفصيل. لقد كان الوقت الذي تضاف إليه هذه الفكرة لفترة طويلة منذ تنفيذ الرمز. قد لا يكون كل شيء دقيقًا للغاية ، لكن هذه هي الفكرة العامة.
ملاحظة: إذا كنت ترغب في استخدام وظيفة نموذج السحب والإفلات ، فقد تضطر بشكل أساسي إلى تغيير طريقة قاعدة بيانات التصميم السابقة. هنا يمكننا تزويدك بتخزين عمودي لقوائم الكلمات الرئيسية.
لقد تمت كتابة التعليقات بشكل أساسي بالتفصيل ، فقط ضعها على الكود.
إذا كان لديك أي أسئلة ، فالرجاء إعطائي بعض النصائح.
<! doctype html> <html> <head> <title> اختبار </title> <style type = "text/css"> html ، body {height: 100 ٪ ؛ العرض: 100 ٪ ؛ الحشو: 0 ؛ الهامش: 0 ؛ } .dialog { /* width: 250px ؛ الارتفاع: 250 بكسل ؛*/ الموضع: مطلق ؛ خلفية اللون: #CCC ؛ -webkit-box-shadow: 1px 1px 3px #292929 ؛ -moz-box-shadow: 1px 1px 3px #292929 ؛ box-shadow: 1px 1px 3px #292929 ؛ /*الهامش: 10px ؛*/ top: 50px ؛ اليسار: 50 بكسل ؛ العتامة: 1 ؛ } .dialog-title {color: #ffff ؛ خلفية اللون:#404040 ؛ حجم الخط: 12pt ؛ خط الرصيف: جريئة ؛ الحشو: 4px 6px ؛ المؤشر: تحرك. الموقف: مطلق ؛ أعلى: 50 بكسل ؛ اليسار: 50 بكسل ؛ } .dialog-content {padding: 4px ؛ المؤشر: تحرك. } .none {display: none ؛ } .box {width: 200px ؛ الارتفاع: 500 بكسل ؛ لون الخلفية: رمادي. ارتفاع الخط: 30 بكسل ؛ الهامش: 100px ؛ }. place {width: 200px ؛ الارتفاع: 50 بكسل ؛ الحدود: 1 بكسل متقطع أحمر. } </style> <script type = "text/javaScript" src = "js/devwin.js"> </script> </head> <body> <!-<div id = "dlgtest">-> <div id = "title"> div </div> div id = "title =" top: 10px " href = "#"> 123 </a> <input id = "text" type = "text" class = "none"> <div id = "box" class = "box"> <! Object var click = document.getElementById ("title") ؛ var click2 = document.getElementById ("title2") ؛ // وضع الحاوية var box = document.getElementById ("box") ؛ // مكان div var في الحاوية = document.createElement ("div") ؛ place.className = "place" ؛ // الكائن المضافة إلى Container var create = document.createElement ("input") ؛ create.type = "text" ؛ var create2 = document.createElement ("input") ؛ create2.type = "password" ؛ // هل من الممكن إضافة vars متعددة isMany = true ؛ Createwin (انقر ، إنشاء ، Ismany ، مكان ، مربع) ؛ Createwin (Click2 ، Create2 ، Ismany ، Place ، Box) ؛ </script> </html> /*** المؤلف: LZH* الوظيفة: تنفيذ نموذج الفرز السحب والإفلات* المعلمات: Oclick انقر على الكائن الذي يؤدي إلى حدوث الحدث* ocreate الكائن الذي تم تمريره في النموذج بعد المغادرة* Bismany يمكن أن يتم سحب كائن Oclick واحد ، إذا لم يتم ملؤها ، Createwin (Oclick ، ocreate ، bismany ، place ، obox = document.body) {// ما إذا كان كائن المشغل قد تم النقر عليه var isclick = false ؛ // ما إذا كان كائن الزناد عنصرًا في الحاوية var isincludebox = false ؛ Space.Style.width = obox.offsetwidth-5 + "px" ؛ place.style.height = oclick.offsetheight-5 + "px" ؛ // عنصر مؤقت من التأثير المتحرك var oclickclone ؛ var oclickdown ؛ // حساب الإزاحة var diffobj ؛ var diffx ؛ var diffy var tmp ؛ var omove_position ؛ // هي النقطة المضمنة في وظيفة الحاوية IsinClude (x ، y ، includebox = obox) {if (x> includebox.offsetleft && y> includebox.offsettop && x <includebox.offsetleft + includebox.offsetwidth && العودة كاذبة }. omove.style.Opacity = 0.4 ؛ omove.style.position = "absolute" ؛ document.body.appendchild (omove) ؛ omove.style.left = e.clientx-diffx+"px" ؛ omove.style.top = e.clienty-diffy+"px" ؛ } وظيفة getDiff (e) {diffobj = e.target ؛ diffx = e.clientx-diffobj.offsetleft ؛ diffy = e.clienty-diffobj.offsettop ؛ } // mouse press function down (e) {if (isInClude ( // استنساخ عقدة الزناد من Click Oclickclone = oclick.clonenode (true) ؛ // حساب إزاحة الماوس (إذا كان هناك هامش ، سيكون هناك إزاحة) getDiff (e) ؛ } آخر {getDiff (e) ؛ var child = obox.childnodes ؛ لـ (var i = 0 ؛ i <child.length ؛ i ++) {// judge ما إذا كانت نقرة الماوس هي عنصر في الحاوية ولا يمكن أن تكون div عنصر نائب (إذا لم تضيف هذا العنصر النائم ، فسيكون خطأ ، لكن السبب المحدد غير معروف) إذا (isinclude (e.clientx ، e.clienty ، الطفل [i]) isInCludeBox = true ؛ // يتم استخدام تأثير عنصر الاستنساخ لسحب Oclickclone = Child [i] .clonenode (true) ؛ // يتم استخدام عنصر استنساخ لوضع Oclickdown = Child [i] .clonenode (true) ؛ // بعد الضغط ، حذف العنصر واستخدم التأثير المتحرك لعرض العنصر obox.removechild (الطفل [i]) ؛ Movemagic (Oclickclone ، e) ؛ // أدخل العنصر النائب لجعل obox.insertbefore (مكان ، الطفل [i]) ؛ // flag = true ؛ استراحة؛ }}}}} // وظيفة حدث حركة الماوس move (e) {if (isClick) {movemagic (oclickclone ، e) ؛ // حدد ما إذا كان الماوس قد انتقل إلى داخل الحاوية إذا (isinclude ( // بمجرد الدخول ، يمكنك إدراج العنصر النائب Div في الموقف الأول Obox.insertBefore (مكان ، الطفل [0]) ؛ // ضع العنصر النائب div وفقًا لموضع الماوس لـ (var i = 0 ؛ i <child.length ؛ i ++) {// لأن العامل النائب الفريد فريد من نوعه ، فأنت بحاجة فقط إلى الحكم على هذا الطريق إذا (e.clienty> child [i]. obox.insertbefore (مكان ، الطفل [i+1]) ؛ آخر obox.appendchild (مكان) ؛ }}}}} // وظيفة حدث رفع الماوس Up (e) {isClick = false ؛ // يتم رفع الماوس ويمكن حذف عنصر تأثير السحب المؤقت. // إذا تم وضع العنصر في الحاوية إذا (isInclude ( // موقف العنصر النائب div var insertplace ؛ لـ (var i = 0 ؛ i <child.length ؛ i ++) {// حدد موضع العنصر النائب div if (place === child [i]) {obox.removechild (child [i]) ؛ insertplace = i ؛ استراحة؛ }} // ugge ما إذا كان يمكن وضع متعددة إذا (! bismany) {if (isInCludeBox) ocreate = oclickdown ؛ if (insertplace == child.length) obox.appendchild (ocreeate) ؛ else obox.insertbefore (ocreate ، الطفل [insertplace]) ؛ } آخر {// يمكنك وضع متعددة يمكن وضعه ، لذلك تحتاج إلى استنساخ كل إذا (isInCludeBox) var ocreateClone = Oclickdown ؛ else var ocreateClone = ocreate.clonenode (true) ؛ if (insertplace == child.length) obox.appendchild (ocreateClone) ؛ آخر {obox.insertbefore (ocreateClone ، الطفل [insertplace]) ؛ }}} آخر {if (isInCludeBox) {var child = obox.childnodes ؛ لـ (var i = 0 ؛ i <child.length ؛ i ++) {if (child [i] === place) {obox.removechild (child [i]) ؛ obox.insertbefore (Oclickdown ، الطفل [i]) ؛ } 1}}} isInCludeBox = false ؛ } document.addeventListener ('mousemove' ، move) ؛ document.addeventListener ('mousedown' ، down) ؛ document.adDeventListener ('mouseup' ، Up) ؛}المثال البسيط أعلاه لنماذج السحب والإفلات من تنفيذ JS النقي هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.