เนื่องจากฉันต้องการใช้แบบฟอร์มการลากและวางฉันจึงชอบทำด้วยตัวเองและไม่ต้องการใช้ปลั๊กอินโดยไม่เข้าใจการใช้งานหรือหลักการดังนั้นฉันจึงพบว่าข้อมูลที่จะนำไปใช้
แนวคิด: ใช้ mousedown เพื่อตรวจสอบว่าตำแหน่งการคลิกเมาส์อยู่ที่การควบคุมทริกเกอร์หรือไม่ ถ้าเป็นเช่นนั้นเมื่อ Mousemove โคลนควบคุมปรับเปลี่ยนความโปร่งใสและเมื่อใส่ลงในคอนเทนเนอร์ให้ถอดการควบคุมและสร้างใส่ลงในคอนเทนเนอร์ (การควบคุมที่วางและการควบคุมทริกเกอร์อาจแตกต่างกัน)
ลากและวาง: ในทำนองเดียวกันเมื่อใช้ mousedown กำหนดว่าจะควบคุมว่ามันเป็นตัวควบคุมใด เมื่อ Mousemove คุณจะต้องวางตำแหน่งตัวยึดตำแหน่งในตำแหน่งเดิมและปรับเปลี่ยนความโปร่งใสขององค์ประกอบและตั้งค่าเป็นตำแหน่งที่แน่นอนเพื่ออำนวยความสะดวกในการลาก เมื่อลากแล้วตัวยึดตำแหน่งจะเปลี่ยนไปตามตำแหน่งเมาส์ (ตัดสินว่าตำแหน่งเมาส์ปัจจุบันเป็นมุมซ้ายบนของการควบคุมในภาชนะบรรจุบวกครึ่งหนึ่งของความสูงของการควบคุม) เมื่อวางลงตำแหน่งของตัวยึดตำแหน่งจะใช้เพื่อแทรก มาดูรหัสโดยละเอียด เวลาที่เพิ่มขึ้นโดยแนวคิดนี้มีความยาวเล็กน้อยนับตั้งแต่มีการใช้งานรหัส ทั้งหมดอาจไม่แม่นยำมาก แต่นี่เป็นความคิดทั่วไป
PS: หากคุณต้องการใช้ฟังก์ชั่นการลากและวางแบบฟอร์มคุณอาจต้องเปลี่ยนวิธีการออกแบบฐานข้อมูลก่อนหน้านี้ ที่นี่เราสามารถจัดให้มีที่เก็บข้อมูลแนวตั้งของรายการคำหลักในการค้นหา
ความคิดเห็นโดยทั่วไปมีการเขียนอย่างละเอียดเพียงแค่วางไว้ในรหัส
หากคุณมีคำถามใด ๆ โปรดให้คำแนะนำกับฉัน
<! doctype html> <html> <head> <title> ทดสอบ </title> <style type = "text/css"> html, body {ความสูง: 100%; ความกว้าง: 100%; Padding: 0; มาร์จิ้น: 0; } .dialog { /* width: 250px; ความสูง: 250px;*/ ตำแหน่ง: สัมบูรณ์; พื้นหลังสี: #CCC; -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; Box-Shadow: 1px 1px 3px #292929; /*มาร์จิ้น: 10px;*/ top: 50px; ซ้าย: 50px; ความทึบ: 1; } .dialog-title {color: #ffff; พื้นหลังสี:#404040; ขนาดฟอนต์: 12pt; Font-Weight: ตัวหนา; Padding: 4px 6px; เคอร์เซอร์: ย้าย; ตำแหน่ง: สัมบูรณ์; ด้านบน: 50px; ซ้าย: 50px; } .dialog-Content {padding: 4px; เคอร์เซอร์: ย้าย; } .none {display: none; } .Box {WIDTH: 200PX; ความสูง: 500px; พื้นหลังสี: สีเทา; ระดับความสูง: 30px; มาร์จิ้น: 100px; }. place {width: 200px; ความสูง: 50px; ชายแดน: 1px ประสีแดง; } </style> <script type = "text/javascript" src = "js/devwin.js"> </script> </head> <body> <!-<div id = "dlgtest">-> <div id = "title"> div> <div> href = "#"> 123 </a> <อินพุต id = "text type =" text "class =" none "> <div id =" box "class =" box "> <!-<อินพุต type =" "name =" "placeolder =" ">-> </div> คลิก = document.getElementById ("title"); var click2 = document.getElementById ("title2"); // ตู้คอนเทนเนอร์วาง var = document.getElementById ("box"); // สถานที่ div var ใน container = document.createelement ("div"); place.className = "สถานที่"; // วัตถุที่เพิ่มลงในคอนเทนเนอร์ var create = document.createElement ("อินพุต"); create.type = "text"; var create2 = document.createElement ("อินพุต"); create2.type = "รหัสผ่าน"; // เป็นไปได้ไหมที่จะเพิ่มหลาย vars isMany = true; createWin (คลิก, สร้าง, ismany, สถานที่, กล่อง); createWin (click2, create2, ismany, place, box); </script> </html> /*** ผู้แต่ง: LZH* ฟังก์ชั่น: การจัดเรียงแบบฟอร์มการลากและวางพารามิเตอร์* พารามิเตอร์: OCLICK คลิกวัตถุที่กระตุ้นเหตุการณ์* oCreate วัตถุที่ส่งผ่านในรูปแบบหลังจากออกไป* bismany สามารถลากวัตถุออกไปได้ 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) {ถ้า (x> includebox.offsetleft && y> includitbox.offsettop && x <includebox.offsetleft + includebox.offsetwidth && กลับเท็จ; } // ฟังก์ชั่นฟังก์ชั่นเอฟเฟกต์ฟังก์ชั่น moveMagic (OMove, e) {// omove_position = window.getComputedStyle (OMOVE) .getPropertyValue ('ตำแหน่ง'); omove.style.Opacity = 0.4; omove.style.position = "สัมบูรณ์"; 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; } // ฟังก์ชั่นเหตุการณ์การกดเมาส์ลง (e) {ถ้า (isinclude (e.clientx, e.clienty, oclick)) {isclick = true; // clone โหนดทริกเกอร์ของคลิก oclickclone = oclick.clonenode (จริง); // คำนวณออฟเซ็ตของเมาส์ (หากมีมาร์จิ้นจะมีการชดเชย) getDiff (E); } else {getDiff (e); var child = obox.childnodes; สำหรับ (var i = 0; i <child.length; i ++) {// ตัดสินว่าการคลิกเมาส์เป็นองค์ประกอบในคอนเทนเนอร์และไม่สามารถเป็นตัวยึดตำแหน่ง (ถ้าคุณไม่เพิ่มตัวยึดตำแหน่งนี้มันจะเป็นข้อผิดพลาด isincludebox = true; // ผลกระทบขององค์ประกอบการโคลนนิ่งใช้ในการลาก oclickclone = child [i] .clonenode (จริง); // องค์ประกอบโคลนใช้เพื่อวาง oclickdown = child [i] .clonenode (จริง); // หลังจากกดให้ลบองค์ประกอบและใช้เอฟเฟกต์การเคลื่อนที่เพื่อแสดงองค์ประกอบ obox.removechild (เด็ก [i]); MoveMagic (Oclickclone, E); // ใส่ตัวยึดตำแหน่งเพื่อทำ obox.insertbefore (สถานที่, เด็ก [i]); // flag = true; หยุดพัก; }}}}} // ฟังก์ชั่นเหตุการณ์การเคลื่อนไหวของเมาส์ย้าย (e) {ถ้า (isclick) {moveMagic (oclickclone, e); // ตรวจสอบว่าเมาส์ย้ายไปอยู่ด้านในของคอนเทนเนอร์หรือไม่ถ้า (Isinclude (E.Clientx, E.Clienty, Obox)) {// คำนวณโหนดลูกในคอนเทนเนอร์ var child = obox.childnodes; // เมื่อเข้าสู่คุณสามารถแทรกตัวยึดตำแหน่งในตำแหน่งแรก obox.insertbefore (สถานที่, เด็ก [0]); // วางตำแหน่งตัวยึดตำแหน่งตามตำแหน่งเมาส์สำหรับ (var i = 0; i <child.length; i ++) {// เพราะตัวยึดตำแหน่งที่ไม่เหมือนใครคุณต้องตัดสินด้วยวิธีนี้ถ้า (e.clienty> child [i]. Offsettop+เด็ก [i] obox.insertbefore (สถานที่, เด็ก [i+1]); else obox.appendchild (สถานที่); }}}}} // ฟังก์ชั่นการยกของเมาส์ขึ้น (e) {isClick = false; // เมาส์ถูกยกขึ้นและองค์ประกอบการลากชั่วคราวสามารถลบ document.body.removechild (oclickclone); // ถ้าองค์ประกอบถูกวางไว้ในคอนเทนเนอร์ถ้า (isinclude (e.clientx, e.clienty)) {var child = obox.childnodes; // ตำแหน่งของตัวยึดตำแหน่ง div var insertplace; สำหรับ (var i = 0; i <child.length; i ++) {// กำหนดตำแหน่งของตัวยึดตำแหน่งถ้า (สถานที่ === เด็ก [i]) {obox.removechild (เด็ก [i]); insertplace = i; หยุดพัก; }} // ตัดสินว่าสามารถวางหลายรายการได้หรือไม่ถ้า (! bismany) {ถ้า (isincludebox) oCreate = oclickdown; if (insertplace == child.length) obox.appendchild (oCreate); else obox.insertbefore (oCreate, เด็ก [insertplace]); } else {// คุณสามารถวางได้หลายอย่างสามารถวางได้ดังนั้นคุณต้องโคลนแต่ละตัวถ้า (isincludebox) var oCreateClone = oclickdown; else var oCreateClone = oCreate.clonenode (จริง); if (insertplace == child.length) obox.appendchild (oCreateClone); else {obox.insertbefore (oCreateClone, เด็ก [insertplace]); }}} else {ถ้า (isincludeBox) {var child = obox.childNodes; สำหรับ (var i = 0; i <child.length; i ++) {ถ้า (เด็ก [i] === สถานที่) {obox.removechild (เด็ก [i]); obox.insertbefore (oclickdown, เด็ก [i]); } 1}}} isincludeBox = false; } document.addeventListener ('mousemove', ย้าย); document.addeventListener ('mousedown', ลง); document.addeventListener ('mouseup', up);}ตัวอย่างง่ายๆข้างต้นของการใช้งานแบบลากและวางแบบพำนัก JS บริสุทธิ์คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น