拖放(Drag 和 drop)是 HTML5 标准的组成部分。
事件概览
dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
drag:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
dragend:事件主体是被拖放元素,在整个拖放操作结束时触发
代码实例
Documentdiv {
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)
}