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

要使用传统的HTML4实现拖放函数，开发人员要么不得不使用复杂的JavaScript编程，要么必须使用jQuery等其他JavaScript框架。

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

所有主要的浏览器(例如Chrome，Firefox 3.5和Safari 4等)都支持HTML 5 DnD。

拖放事件

在拖放操作的各个阶段都会触发许多事件。这些事件在下面列出-

Sr.No. Events & Remark
1

dragstart

当用户开始拖动对象时触发。
2

dragenter

在发生拖动时将鼠标第一次移到目标元素上时触发。
3

dragover

发生拖动时，将鼠标移到元素上时将触发此事件。
4

dragleave

当鼠标在拖动时离开元素时，将触发此事件。
5

drag

在拖动对象时每次移动鼠标都会触发。
6

drop

在拖动操作结束时，在发生放置的元素上触发放置事件。
7

dragend

当用户在拖动对象时释放鼠标按钮时触发。

DataTransfer对象

所有拖放事件的事件侦听器方法都接受 Event 对象，该对象具有名为 dataTransfer 的只读属性。

event.dataTransfer 返回与事件关联的 DataTransfer 对象，如下所示-

function EnterHandler(event) {
   DataTransfer dt=event.dataTransfer;
   .............
}

DataTransfer 对象保存有关拖放操作的数据。可以根据与DataTransfer对象关联的各种属性来检索和设置此数据，如下所述-

Sr.No. DataTransfer attributes and their description
1

dataTransfer.dropEffect [= value ]

  • 返回当前选择的操作类型。

  • 可以设置此属性，以更改所选的操作。

  • 可能的值为none，copy，link和move。
2

dataTransfer.effectAllowed [=value]

  • 返回允许的操作类型。

  • 可以设置此属性，以更改允许的操作。

  • 可能的值为 none，copy，copyLink，copyMove，link，linkMove，move，all和uninitialized。
3

dataTransfer.types

返回一个DOMStringList，列出在dragstart事件中设置的格式。此外，如果要拖动任何文件，则类型之一将是字符串" Files"。
4

dataTransfer.clearData([format])

删除指定格式的数据。如果省略该参数，则删除所有数据。
5

dataTransfer.setData(format，data)

添加指定的数据。
6

data=dataTransfer.getData(format)

返回指定的数据。如果没有这样的数据，则返回空字符串。
7

dataTransfer..files

返回要拖动的文件的FileList(如果有)。
8

dataTransfer.setDragImage(element，x，y)

使用给定的元素更新拖动反馈，以替换任何先前指定的反馈。
9

dataTransfer.addElement(element)

将给定元素添加到用于呈现拖动反馈的元素列表中。

拖放示例

以下是实现拖放操作要执行的步骤-

第1步- 创建Draggable对象

这是要采取的步骤-

  • 如果要拖动元素，则需要将该元素的 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: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; 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 HTML5 demo</h2>
         <div>Try to drag the purple 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 event，该事件用于确定放置目标是否接受放置。

  • dragover event，用于确定向用户显示哪些反馈。

  • 最后，是 drop 事件，它允许执行实际的放置。

以下是将对象放入另一个对象的示例-

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; 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 HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

这将产生以下输出-

参考链接

https://www.learnfk.com/html5/html5-drag-drop.html