拖拽（Drag_Drop）

优质

小牛编辑

134浏览

2023-12-01

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

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

现在，HTML 5提出了一个拖放（DnD）API，它为浏览器提供了本机DnD支持，使代码编写变得更加容易。

所有主流浏览器（如Chrome，Firefox 3.5和Safari 4等）均支持HTML 5 DnD。

拖放事件

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

Sr.No.	活动和描述
1	dragstart 用户开始拖动对象时触发。
2	dragenter 在拖动发生时首次将鼠标移动到目标元素上时触发。此事件的侦听器应指示是否允许在此位置进行放置。如果没有侦听器，或者侦听器不执行任何操作，则默认情况下不允许删除。
3	dragover 当发生拖动时，鼠标在元素上移动时会触发此事件。大多数情况下，在监听器期间发生的操作将与dragenter事件相同。
4	dragleave 当鼠标在发生拖动时离开元素时会触发此事件。听众应删除用于丢弃反馈的任何突出显示或插入标记。
5	drag 每次拖动对象时移动鼠标都会触发。
6	drop 在拖动操作结束时发生拖放的元素上触发drop事件。监听器负责检索被拖动的数据并将其插入丢弃位置。
7	dragend 用户在拖动对象时释放鼠标按钮时触发。

Note - 请注意，仅触发拖动事件; 在拖动操作期间不会触发鼠标事件，例如mousemove 。

DataTransfer对象

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

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

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

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

Sr.No.	DataTransfer属性及其描述
1	dataTransfer.dropEffect [ = value ] 返回当前选定的操作类型。可以设置此属性，以更改所选操作。可能的值为none，copy，link和move。
2	dataTransfer.effectAllowed [ = value ] 返回允许的操作类型。可以设置此属性，以更改允许的操作。可能的值为none, copy, copyLink, copyMove, link, linkMove, move, all和uninitialized 。
3	dataTransfer.types 返回列出dragstart事件中设置的格式的DOMStringList。此外，如果正在拖动任何文件，则其中一种类型将是字符串“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属性设置为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事件，用于确定放置目标是否接受丢弃。如果要接受掉落，则必须取消此事件。
dragover事件，用于确定向用户显示的反馈。如果事件被取消，则根据dropEffect属性的值更新反馈（通常是光标）。
最后， drop事件允许执行实际的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>