在拖拽的世界里,元素被分为2类,一类是被拖拽元素,一类是目标元素,即想把被拖拽的元素拖到哪里。
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
拖拽主要过程:
- 把被拖拽的元素设置成可拖拽,即属性值draggable=true。
- 在被拖拽的元素上添加dragstart事件,在开始拖放被拖放元素时触发。
- 在目标元素上添加drop事件,在目标元素完全接受被拖放元素时触发。
示例:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:250px; height:250px;padding:10px;border:1px solid #aaaaaa;}
img {
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
function drag_start(ev)
{
console.log('drag_start')
ev.dataTransfer.setData("Text",ev.target.id);
}
function drag(ev)
{
console.log('drag')
}
function drag_end(ev)
{
console.log('drag_end')
}
function drag_enter(ev)
{
console.log('drag_enter')
}
function drag_over(ev)
{
console.log('drag_over')
ev.preventDefault();
}
function drag_leave(ev)
{
console.log('drag_leave')
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
/*
关键代码解释:
* 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
* 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
* 被拖数据是被拖元素的 id ("drag1")
* 把被拖元素追加到放置元素(目标元素)中
*/
</script>
</head>
<body>
<p>
请把图片拖放到矩形中:
</p>
<div id="div1" ondragenter="drag_enter(event)" ondragleave="drag_leave(event)" ondragover="drag_over(event)" ondrop="drop(event)">
</div>
<br/>
<img draggable="true" id="drag1" ondragstart="drag_start(event)" ondrag="drag(event)" ondragend="drag_end(event)" src="./04.jpg"/>
</body>
</html>
面试题:说一下HTML5 drag api
参考回答:
-
dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。
-
dragend:事件主体是被拖放元素,在整个拖放操作结束时触发
-
darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。
-
dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。
-
dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。
-
dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。
-
drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。
参考链接:https://blog.csdn.net/weixin_41910848/article/details/82218243
除了Event事件,在拖拽系统中 还有DragEvent事件
dataTransfer 对象用于保存拖动并放下(drag and drop)过程中的数据。它可以保存一项或多项数据,这些数据项可以是一种或者多种数据类型。
dataTransfer:https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer
通过引用计数解决移入一下,触发多次onDragEnter问题
移入一次,onDragEnter可能会触发多次。如何解这个问题呢?通过引用计数
onDragEnter(e) {
const targetNode = getTarget(rowCls, e.target);
targetNode[COUNT] = (targetNode[COUNT] || 0) + 1;
setDragCls(targetNode, 'add');
},
onDragOver(e) {
e.preventDefault();
},
onDragLeave(e) {
const targetNode = getTarget(rowCls, e.target);
if (--targetNode[COUNT] === 0) {
setDragCls(targetNode, 'remove');
}
}