基本效果展示:
基本思路:
- 使元素可以被拖拽(利用 draggable 属性, 注意:链接和图片默认是可拖拽的)
- 拖拽时,通过被拖拽节点和其他节点的drag事件交互,来切换两个节点的位置(非唯一方法)
- 添加用户拖拽交互效果
用到的方法:
ondrag 事件在元素或者选取的文本被拖动时触发。
-
在拖动目标上触发(源目标元素):
- ondragstart - 用户开始拖动元素
- ondrag - 元素正在被拖动
- ondragend - 用户结束元素拖动
-
释放目标时触发的事件:
- ondragenter - 当被拖动的对象进入其容器范围内时触发
- ondragover - 当被拖动的对象在另一对象容器范围内拖动时触发
- ondragleave - 当被拖动的对象离开其容器范围内时触发
- ondrop - 在一个拖动过程中,释放鼠标键时触发
注意: 在拖动元素时,每隔 350 毫秒会触发 ondrag 事件。
基本实现(无交互):
function dragHandler() {
// 用来存取被拖拽的节点
let draggedNode = null
// 获取可拖拽节点
const dragNodes = document.querySelectorAll('div[draggable="true"]')
// 给可拖拽节点绑定相关事件
dragNodes.forEach(item => {
item.ondragstart = () => {
draggedNode = item
}
// 默认情况下,数据/元素不能在其他元素中被拖放,也就是会阻止你做drop操作,所以取消其默认行为
item.ondragover