จะใช้การลากและวางใน HTML5 ได้อย่างไร?

Drag and Drop (DnD) เป็นแนวคิดอินเทอร์เฟซผู้ใช้ที่มีประสิทธิภาพ ซึ่งทำให้ง่ายต่อการคัดลอก เรียงลำดับใหม่ และลบรายการด้วยการคลิกเมาส์ ซึ่งช่วยให้ผู้ใช้สามารถคลิกปุ่มเมาส์ค้างไว้เหนือองค์ประกอบ ลากไปยังตำแหน่งอื่น และปล่อยปุ่มเมาส์เพื่อวางองค์ประกอบที่นั่น

เพื่อให้บรรลุฟังก์ชันการลากและวางด้วย HTML4 แบบเดิม นักพัฒนาอาจต้องใช้การเขียนโปรแกรม Javascript ที่ซับซ้อนหรือเฟรมเวิร์ก Javascript อื่นๆ เช่น jQuery เป็นต้น

ตอนนี้ HTML 5 มาพร้อมกับ API แบบลากแล้วปล่อย (DnD) ที่นำการสนับสนุน DnD ดั้งเดิมมาสู่เบราว์เซอร์ ทำให้เขียนโค้ดได้ง่ายขึ้นมาก

วิธีใช้งานการลากและวาง

ในการลากและวาง คุณต้องปฏิบัติตามกระบวนการสองขั้นตอน

ขั้นตอนที่ 1 - ทำให้วัตถุสามารถลากได้

ในการปรับใช้การลากและวางใน HTML5 ขั้นแรก คุณต้องทำให้วัตถุสามารถลากได้

หากคุณต้องการลากองค์ประกอบ คุณต้องตั้งค่าแอตทริบิวต์ที่ลากได้เป็นจริงสำหรับองค์ประกอบนั้น ตั้งค่าตัวฟังเหตุการณ์สำหรับ dragstart ที่เก็บข้อมูลที่ถูกลาก ตัวฟังเหตุการณ์ dragstart จะตั้งค่าเอฟเฟกต์ที่อนุญาต (คัดลอก ย้าย เชื่อมโยง หรือผสมกัน)

ตัวอย่าง

<!DOCTYPE HTML>
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #50B948; width:75px; height:75px; }
         #boxB { background-color: #0000FF; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop in HTML5</h2>
         <div>Try to drag the green box around.</div>
         <div id="boxA" draggable="true"
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB">Dustbin</div>
      </center>
   </body>
</html>

ขั้นตอนที่ 2 - การวางวัตถุ

เพื่อยอมรับการดร็อป เป้าหมายการดร็อปต้องฟังเหตุการณ์อย่างน้อยสามเหตุการณ์

เหตุการณ์ dragenter ใช้เพื่อกำหนดว่าเป้าหมายการดร็อปคือการยอมรับการดร็อปหรือไม่ หากการดรอปเป็นที่ยอมรับ จะต้องยกเลิกกิจกรรมนี้ กิจกรรม dragover ซึ่งใช้เพื่อกำหนดว่าจะแสดงความคิดเห็นใดต่อผู้ใช้

จะใช้การลากและวางใน HTML5 ได้อย่างไร?

นี่คือวิธีที่คุณสามารถวางวัตถุหนึ่งครั้งไปยังอีกวัตถุหนึ่ง

ตัวอย่าง

<!DOCTYPE HTML>
<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #50B948; width:75px; height:75px; }
         #boxB { background-color: #0000FF; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
             ev.dataTransfer.effectAllowed='move';
             ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
             ev.dataTransfer.setDragImage(ev.target,0,0);
             return true;
          }
          function dragEnter(ev) {
             event.preventDefault();
             return true;
          }
          function dragOver(ev) {
             return false;
          }
          function dragDrop(ev) {
             var src = ev.dataTransfer.getData("Text");
             ev.target.appendChild(document.getElementById(src));
             ev.stopPropagation();
             return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop in HTML5</h2>
         <div>Try to move the green box into the blue box.</div>
         <div id="boxA" draggable="true"
            ondragstart="return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(ev)"
            ondrop="return dragDrop(ev)"
            ondragover="return dragOver(ev)">Dustbin
         </div>
      </center>
   </body>
</html>