html 拉动效果,HTML5 实现拖动效果 Drag Api

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

事件概览

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

代码实例

Document

div {

width: 200px;

height: 100px;

border: 1px solid greenyellow;

margin-bottom: 30px;

}

img {

width: 50px;

}

id="div1"

οndragοver="allowDrag(event)"

οndrοp="drop(event)">

id="dogImg"

src="../images/dog.jpg"

alt=""

draggable="true"

οndragstart="drag(event)"

"

>

// 主要用到三个drag事件

// dragstart 在开始拖放 鼠标点下的时候被触发

// dragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

// drop 当拖放完成,鼠标被释放的时候触发

// 设置drag data

// dataTransfer.setData() 方法用来设置拖放操作的drag data到指定的数据和类型。

// dataTransfer.getData() 方法接受指定类型的拖放(以DOMString的形式)数据。如果拖放行为没有操作任何数据，会返回一个空字符串。

// 形参ev 为DragEvent

function drag(ev) {

ev.dataTransfer.setData("Text",ev.target.id)

// console.log(ev)

}

function allowDrag(ev) {

//默认情况下，数据/元素不能放置到其他元素中。 如果要实现改功能，我们需要防止元素的默认处理方法。我们可以通过调用 event.preventDefault() 方法来实现 ondragover 事件。

ev.preventDefault();

// console.log(111)

}

function drop (ev) {

// 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)

ev.preventDefault();

var data = ev.dataTransfer.getData("text");

//把拉去的元素加到容器中

ev.target.appendChild(document.getElementById(data))

// console.log(111)

}