此代码示例展示了如何使用HTML5的draggable属性和JavaScript事件监听器实现元素拖放功能。当用户开始拖动、移动元素以及松开鼠标时，分别触发handleDragStart、handleDragOver和handleDrop函数，实现元素内容交换。
<!DOCTYPE html><html>
<head>
<title>Drag and Drop Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div class="box" draggable="true">1</div>
<div class="box" draggable="true">2</div>
<div class="box" draggable="true">3</div>
<div class="box" draggable="true">4</div>
<script>
var dragSrcEl = null;
function handleDragStart(e) {
console.log("开始拖动");
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
console.log("移动元素");
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDrop(e) {
console.log("松开鼠标");
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
var boxes = document.querySelectorAll('.box');
[].forEach.call(boxes, function(box) {
box.addEventListener('dragstart', handleDragStart, false);
box.addEventListener('dragover', handleDragOver, false);
box.addEventListener('drop', handleDrop, false);
});
</script>
</body>
</html>给元素对象设置draggable属性为true，js中设置对应的监听事件即可实现。
扫一扫
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
