HTML中的Drag和Drop
在HTML5中为元素添加了draggable属性用来表示元素是否可以拖动。而且该值必须设置为true,否则不生效。示例如下:
function drop(event) {
var elementId = event.dataTransfer.getData("dragElement");
event.target.appendChild(document.getElementById(elementId));
}
function drag(event) {
console.log('drag start');
event.dataTransfer.effectAllowed = 'copy';
event.dataTransfer.setData("dragElement", event.target.id);
}
function allowDrop(event) {
console.log('drag over');
event.dataTransfer.effectAllowed = 'copy';
event.preventDefault();
}
<body>
<div ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="dragEnter()" ondragleave="dragLeave()"></div>
<div id="dragElement" draggable="true" ondragstart="drag(event)" ondragend="dragEnd()" ondrag="onDrag()">Drag</div>
</body>
其中主要涉及两个元素:被拖动元素(设置draggable属性)和拖放目标。
被拖动元素
包含的三个拖放事件:
- ondragstart:按下鼠标并开始移动时触发该事件。
- drag:在start事件触发后被触发,并在鼠标移动过程中不停被触发。
- dragEnd:当拖动停止触发(无论把元素放到拖放目标上还是在无效目标上)
在dragStart事件触发时,还可以为被拖动元素指定effectAllowed。
拖放目标
拖放目标指的是在鼠标停止移动时被放置当目标。包含如下事件:
- dragenter:被拖动元素进入目标时触发。
- dragOver:被拖动元素在目标元素上移动时被触发。
- dragleave:被拖动元素离开目标时触发。
- drop:被拖动元素被放置在目标上时被触发。
注意:默认情况下目标元素是不允许被放置的,所以不会触发drop事件。这时需要在dropover中阻止默认行为才能成为被允许放置的目标。
dataTransfer对象
dataTransfer对象能够实现在拖放过程中数据的交换,它是事件对象的属性。主要方法:getData、setData、clearData和setDragImage(用于设置元素移动过程中的图像)
event.dataTransfer.setData("dragElement", event.target.id);
在元素开始拖动时调用setData方法将元素id保存起来,并命名为dragElement。
event.dataTransfer.getData("dragElement")
在元素停止拖动时调用getData方法获取保存的数据,该方法只接受一个参数,也就是调用setData时的第一个参数。