拖拽事件&＃xff08;待更新&＃xff09;
今天同事问有没有实现过表格的拖拽功能&＃xff0c;我当时想的是应该跟图片的拖拽代码逻辑是一样的主要是使用了浏览器中的以下几个事件
例如&＃xff1a;
一、dragstart 二、dragend 三、dragover 四、dragenter 五、drop 等
文章目录
- 拖拽事件&＃xff08;待更新&＃xff09;
- 前言(各个浏览器的兼容性)
- 一、相关的五个事件api如下&＃xff1a;
- 拖拽流程说明&＃xff1a;
- 1.dragstart事件
- 2.dragenter事件
- 3.dragover事件
- 4.drop事件(必须要dragover事件触发)
- 5.dragend事件
- MDN详细说明&＃xff1a;
- 二、相关的属性
- 1.draggable(让元素可拖拽)
- draggable解释说明&＃xff1a;
- 使用代码如下&＃xff1a;
- 如下图所示&＃xff1a;
- 2.dataTransfer(对应的拖拽媒介)
- 解释说明&＃xff08;通用方法&＃xff09;&＃xff1a;
- &＃96;1.DataTransfer.clearData()&＃96;
- &＃96;2.DataTransfer.getData()&＃96;
- &＃96;3.DataTransfer.setData()&＃96;
- &＃96;4.DataTransfer.setDragImage()&＃96;
- 代码如下&＃xff08;示例&＃xff09;&＃xff1a;
- 官网&＃x1f517;如下
- 3.preventDefault(阻止默认事件)
- 4.Event.effectAllowed (拖拽的效果)
- 案例一&＃xff1a;自定义div拖拽如下&＃x1f517;
- 案例二&＃xff1a;两种表格拖拽方法&＃x1f517;
- 总结(后续会持续的更新)
前言(各个浏览器的兼容性)
提示&＃xff1a;HTML5专门提供的拖拽功能&＃xff0c;以后就不用使用mouseover等事件了。遇到这类的效果也不用一直折腾了
1.兼容性如下图&＃xff1a;
提示&＃xff1a;以下是本篇文章正文内容&＃xff0c;下面案例可供参考
一、相关的五个事件api如下&＃xff1a;
拖拽流程说明&＃xff1a;
HTML 拖拽&＃xff08;Drag and Drop&＃xff09;使应用程序能够在浏览器中使用拖放功能。
例如&＃xff0c;用户可使用鼠标选择可拖拽&＃xff08;draggable&＃xff09;元素&＃xff0c;将元素拖拽到可放置&＃xff08;droppable&＃xff09;元素&＃xff0c;并释放鼠标按钮以放置这些元素。
拖拽操作期间&＃xff0c;会有一个可拖拽元素的半透明快照跟随着鼠标指针。
1.dragstart事件
dragstart类似于鼠标按下事件&＃xff1a;当元素开始被拖拽的时候触发的事件
作用于&＃xff1a;被拖拽的元素
2.dragenter事件
dragenter类似于鼠标进入元素的事件&＃xff1a;当拖拽的元素进入目标元素的上方时&＃xff0c;触发的事件
作用于&＃xff1a;目标元素
3.dragover事件
dragover类似于鼠标在某元素上的事件&＃xff1a;拖拽元素在目标元素上移动的时候触发的事件
作用于&＃xff1a;目标元素
4.drop事件(必须要dragover事件触发)
drop类似于鼠标松开的事件&＃xff1a;被拖拽的元素在目标元素上&＃xff0c;鼠标放开触发的事件
作用于&＃xff1a;目标元素
5.dragend事件
类似于鼠标松开的事件&＃xff1a;当拖拽完成后触发的事件
作用于&＃xff1a;被拖拽的元素
MDN详细说明&＃xff1a;
链接如下
MDN拖拽解析
如下图所示&＃xff1a;
二、相关的属性
1.draggable(让元素可拖拽)
draggable解释说明&＃xff1a;
draggable用于标识元素是否允许使用 拖放操作 API (en-US) 拖动。
draggable的取值如下&＃xff1a;
true&＃xff0c;表示元素可以被拖动 &＃xff1b;false&＃xff0c;表示元素不可以被拖动 &＃xff1b;如果该属性没有设值&＃xff0c;则默认值 为 auto&＃xff0c;表示使用浏览器定义的默认行为。
这个属性是枚举类型&＃xff0c;而不是布尔类型。这意味着必须显式指定值为 true 或者 false
使用代码如下&＃xff1a;
<body>
<ul>
<div class&＃61;"trs" draggable&＃61;"true">列表1div>
<div class&＃61;"trs" draggable&＃61;"true">列表2div>
<div class&＃61;"trs" draggable&＃61;"true">列表3div>
<div class&＃61;"trs" draggable&＃61;"true">列表4div>
<div class&＃61;"trs" draggable&＃61;"true">列表5div>
ul>
body>
如下图所示&＃xff1a;
2.dataTransfer(对应的拖拽媒介)
解释说明&＃xff08;通用方法&＃xff09;&＃xff1a;
退拽对象用来传递的媒介&＃xff0c;使用一般为Event.dataTransfer
1.DataTransfer.clearData()
删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定&＃xff0c;则删除与所有类型关联的数据。如果指定类型的数据不存在&＃xff0c;或者 data
transfer 中不包含任何数据&＃xff0c;则该方法不会产生任何效果。
2.DataTransfer.getData()
检索给定类型的数据&＃xff0c;如果该类型的数据不存在或 data transfer 不包含数据&＃xff0c;则返回空字符串。
3.DataTransfer.setData()
设置给定类型的数据。如果该类型的数据不存在&＃xff0c;则将其添加到末尾&＃xff0c;以便类型列表中的最后一项将是新的格式。如果该类型的数据已经存在&＃xff0c;则在相同位置替换现有数据。
4.DataTransfer.setDragImage()
用于设置自定义的拖动图像。
代码如下&＃xff08;示例&＃xff09;&＃xff1a;
event.dataTransfer.setData(&＃39;drag_text&＃39;,event.target.innerHTML)
官网&＃x1f517;如下
DataTransfer解析
3.preventDefault(阻止默认事件)
preventDefault() 这哥事件大家应该已经非常熟悉了&＃xff0c;就是阻止事件的默认事件
在这里的主要作用是&＃xff0c;在dragstart这个事件的时候&＃xff0c;不能使用 preventDefault 阻止默认事件&＃xff0c;
使用了preventDefault的后果就是&＃xff0c;不能进行拖拽&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;所以这里要注意⚠️⚠️
4.Event.effectAllowed (拖拽的效果)
拖拽效果的一个设置
案例一&＃xff1a;自定义div拖拽如下&＃x1f517;
简单的自定义拖拽实现效果
案例二&＃xff1a;两种表格拖拽方法&＃x1f517;
待完善&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff08;10.17本月一定发出来&＃x1f4aa;&＃x1f4aa;&＃x1f4aa;&＃xff09;
总结(后续会持续的更新)
提示&＃xff1a;案例一主要是为了&＃xff0c;让部分人更好的去熟悉Api的使用&＃xff0c;所以会有很多的漏洞&＃xff0c;大家主要以参考为主&＃xff1b;案例二&＃xff1a;对于表格的操作相对成熟&＃xff0c;包含了组件库的使用&＃xff0c;和两种原声Js的拖拽写法。
京公网安备 11010802041100号