如何在HTML5中使用拖放功能？

拖放(DnD)是强大的用户界面概念，通过单击鼠标，可以轻松地复制，重新排序和删除项目。这允许用户在元素上方单击并按住鼠标按钮，将其拖动到另一个位置，然后释放鼠标按钮以将元素放到那里。

要使用传统的HTML4实现拖放功能，开发人员要么必须使用复杂的Javascript编程，要么要使用其他Javascript框架，例如jQuery等。

现在，HTML 5提供了拖放(DnD)API，该API为浏览器带来了本机DnD支持，从而使编写代码变得更加容易。

如何实现拖放

要实现拖放，您需要遵循两个步骤。

步骤1-使对象可拖动

要在HTML5中实现拖放，首先，您需要使对象可拖动，

如果要拖动元素，则需要将该元素的draggable属性设置为true。为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事件用于确定放置目标是否接受放置。如果要接受下降，则必须取消此事件。拖动事件，用于确定要向用户显示哪些反馈。

这是如何将一个对象放到另一个对象上的方法

示例

<!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>

基础教程