ฝึกการลากและวาง API ใน HTML5 เพื่อตระหนักถึงรายการการลากและปล่อยการเคลื่อนไหว! บทความอ้างอิง: JS HTML5 DRAG และ DOOT IMAGE PREVIEVER
การใช้งาน HTML5 Drag and Drop Mobile List:
1. ลูปเพื่อตั้งค่าแอตทริบิวต์ draggable ของเด็กแต่ละคนและตั้งค่าเครื่องหมายลาก (จะย้ายเด็กมากกว่าหนึ่งคนหรือทุกคนทั้งหมด)
2. ทุกครั้งที่คุณเข้าสู่พื้นที่จัดส่งจะมีเครื่องหมายลากและวางในระหว่างการตรวจจับและหากมีให้เพิ่มองค์ประกอบ DOM และอื่น ๆ
แนวคิดการใช้งานอีกประการหนึ่ง คือ: คุณสามารถใช้วัตถุ DataTransfer ในการลากและวางเป็นคุณสมบัติใช้วิธีการ setData () และ getData () เพื่อผ่าน ID ของเด็กที่ถูกลากแต่ละคนและค้นหาเด็กที่ระบุเพื่อย้าย ... ไปทดลอง - -
html:
// รายการว่าง <div id = "box"> </div> // รายการเนื้อหา <ul id = "con"> <li> รายการ 1 </li> <li> รายการ 2 </li> <li> รายการ 3 </li> <li> รายการ 4 </li></ul>
JS:
<script> ฟังก์ชั่น $ (id) {return document.getElementById (id); } var con = $ ("con"); var box = $ ("box"); var lidoms = document.getElementsByTagname ("li"); var i = 0, len = lidoms.length; // ลูปเพื่อตั้งค่าคุณสมบัติที่แยกออกได้ของเด็กแต่ละคนและลากเครื่องหมายในเวลาสำหรับ (; i <len; i += 1) {lidoms [i]. ddaggable = 'true'; lidoms [i] .flag = false; lidoms [i] .ondragstart = function () {this.flag = true; - lidoms [i] .ondragend = function () {this.flag = false; - } // เหตุการณ์ที่เกิดขึ้น $ ("กล่อง"). onDragenter = ฟังก์ชั่น (e) {e.preventDefault (); console.log ('รายการ'); - $ ("box"). onDragover = function (e) {e.preventDefault (); console.log ('ย้าย'); - $ ("box"). onDragleave = function (e) {e.preventDefault (); console.log ('ลา'); - $ ("box"). onDragleave = function (e) {e.preventDefault (); สำหรับ (var i = 0; i <lidoms.length; i += 1) {ถ้า (lidoms [i] .flag) {box.appendchild (lidoms [i]); }} console.log ('ความสำเร็จ'); - // เหตุการณ์ในพื้นที่ trouting $ ("con"). ondrager = function (e) {e.preventDefault (); console.log ('Enter'); - $ ("con"). onDragover = function (e) {e.preventDefault (); console.log ('ย้าย'); - $ ("con"). onDragover = function (e) {e.preventDefault (); console.log ('ลา'); - $ ("con"). onDrop = function (e) {e.preventDefault (); สำหรับ (var i = 0; i <lidoms.length; i += 1) {ถ้า (lidoms [i] .flag) {// ในเวลานี้วัตถุกล่องคือ li ไม่ใช่ li ของคอนเทนเนอร์ดั้งเดิม $ ("con"). ภาคผนวก (lidoms [i]); }} console.log ('ความสำเร็จ'); - </script>ภาพการทำซ้ำ:
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน