HTML5-拖放 - 芒果文档

📌 相关文章

📜 HTML5-拖放

📅 最后修改于: 2020-10-23 06:19:47 🧑 作者: Mango

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

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

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

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

拖放事件

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

Sr.No.	Events & Description
1	dragstart Fires when the user starts dragging of the object.
2	dragenter Fired when the mouse is first moved over the target element while a drag is occurring. A listener for this event should indicate whether a drop is allowed over this location. If there are no listeners, or the listeners perform no operations, then a drop is not allowed by default.
3	dragover This event is fired as the mouse is moved over an element when a drag is occurring. Much of the time, the operation that occurs during a listener will be the same as the dragenter event.
4	dragleave This event is fired when the mouse leaves an element while a drag is occurring. Listeners should remove any highlighting or insertion markers used for drop feedback.
5	drag Fires every time the mouse is moved while the object is being dragged.
6	drop The drop event is fired on the element where the drop was occurred at the end of the drag operation. A listener would be responsible for retrieving the data being dragged and inserting it at the drop location.
7	dragend Fires when the user releases the mouse button while dragging an object.

注-请注意，仅触发了拖动事件；在拖动操作过程中不会触发诸如mousemove之类的鼠标事件。

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 ] Returns the kind of operation that is currently selected. This attribute can be set, to change the selected operation. The possible values are none, copy, link, and move.
2	dataTransfer.effectAllowed [ = value ] Returns the kinds of operations that are to be allowed. This attribute can be set, to change the allowed operations. The possible values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
3	dataTransfer.types Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string “Files”.
4	dataTransfer.clearData ( [ format ] ) Removes the data of the specified formats. Removes all data if the argument is omitted.
5	dataTransfer.setData(format, data) Adds the specified data.
6	data = dataTransfer.getData(format) Returns the specified data. If there is no such data, returns the empty string.
7	dataTransfer.files Returns a FileList of the files being dragged, if any.
8	dataTransfer.setDragImage(element, x, y) Uses the given element to update the drag feedback, replacing any previously specified feedback.
9	dataTransfer.addElement(element) Adds the given element to the list of elements used to render the drag feedback.

拖放过程

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

第1步-使对象可拖动

这是要采取的步骤-

如果要拖动元素，则需要将该元素的draggable属性设置为true 。
为dragstart设置一个事件侦听器，该事件侦听器存储要拖动的数据。
事件监听器dragstart将设置允许的效果（复制，移动，链接或某种组合）。

以下是使对象可拖动的示例-

现场演示


      
      
      
   
   
      
      
         Drag and drop HTML5 demo
         Try to drag the purple box around.
         
         
            Drag Me
         
         
         Dustbin

这将产生以下结果-

步骤2-放下物件

要接受放置，放置目标必须侦听至少三个事件。

Dragenter事件，用于确定放置目标是否接受放置。如果要接受下降，则必须取消此事件。
拖动事件，用于确定要向用户显示哪些反馈。如果事件被取消，则基于dropEffect属性的值来更新反馈（通常是光标）。
最后是放置事件，它允许执行实际的放置。

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

现场演示


      
   
   
      
         Drag and drop HTML5 demo
         Try to move the purple box into the pink box.
         
            Drag Me
         
         Dustbin

这将产生以下结果-