html5 js拖拽技术,html5 拖拽及用 js 实现拖拽

html5 拖拽及用 js 实现拖拽

1. HTML5 拖拽

1.1 相关知识

拖拽元素：可以为元素添加 draggable="true"来让元素能够被拖拽。

拖拽元素的事件监听：(应用于拖拽元素)ondragstart当拖拽开始时调用

ondragleave 当鼠标离开拖拽元素时调用

ondragend 当拖拽结束时调用

ondrag 整个拖拽过程都会调用

目标元素：把元素A拖拽到元素B里，那么元素B就是目标元素。页面中任何一个元素都可以成为目标元素。

目标元素的事件监听：(应用于目标元素)ondragenter 当拖拽元素进入时调用

ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发(不管拖拽元素此时是移动还是不动的状态)

ondrop 当在目标元素上松开鼠标时调用

ondragleave 当鼠标离开目标元素时调用

如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。

1.2 拖拽基础

代码Document

1.3 将 A 在 B、C 之间拖拽

代码DocumentboxB12345boxC {

// 从 boxB 拖拽到 boxC

cell.ondragstart = function () {

// 保持当前拖拽的元素

temp = this

}

cell.ondragend = function () {

temp = null

}

boxC.ondragover = function (e) {

e.preventDefault()

}

boxC.ondragenter = function () {

this.appendChild(temp)

}

// 从 boxC 拖拽到 boxB

boxB.ondragover = function (e) {

e.preventDefault()

}

boxB.ondragenter = function () {

this.appendChild(temp)

}

})" _ue_custom_node_="true">

效果展示

2. 用 js 实现拖拽

offsetLeft 和 clientX

2.1 js 简单拖拽

按下鼠标进行简单的拖拽。

代码Document

效果展示

2.2 带效果的拖拽

代码Document请选择拖拽的方式12

效果展示

有时会卡顿，未解决…