h5拖拽属性

午睡的风

已于 2022-12-26 00:18:41 修改

阅读量842

点赞数 1

文章标签：前端 javascript html

于 2022-12-26 00:11:42 首次发布

本文链接：https://blog.csdn.net/MX22724/article/details/128439441

版权

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

在开发中，我们经常使用原生的 JavaScript 来实现拖放效果，实现起来比较复杂。如何让实现拖放效果变得简单呢？HTML5 为我们提供了更好用的接口和事件，在很大程度上降低了页面中拖放交互的实现难度。

拖放的概念：拖放（Drag 和 drop）是 HTML5 标准的组成部分，是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖拽页面中的指定元素到另一个元素中。

拖放过程：首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果源对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。

源对象：表示被拖动的元素。为元素添加 draggable 属性可以设置此元素为源对象。

目标对象：源对象进入的元素称作目标对象，目标对象可以是页面中的任一元素。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QEd8lFF8-1671984406594)(MD文档.assets/drag-2.png)]

HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events。

一个典型的拖拽操作是这样的：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如 drag 和 dragover 事件类型）。

下面的表格提供了一个简短的事件类型描述：

事件	On 型事件处理程序	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。

下面通过一个简单的示例来讲解拖放事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽事件</title

关注