html元素拖动互换位置代码
时间: 2023-10-08 21:09:30 浏览: 132
以下是一个 HTML + JavaScript 示例代码,演示了如何使用HTML5的拖放API来实现元素的拖动互换位置:
```html
<!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"></div>
<div class="box" draggable="true"></div>
<div class="box" draggable="true"></div>
<div class="box" draggable="true"></div>
<script>
var dragSrcEl = null;
function handleDragStart(e) {
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDrop(e) {
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>
```
该代码创建了四个拖动的元素,当用户拖动这些元素时,会触发相应的事件。在handleDragStart事件中,将被拖动的元素设置为dragSrcEl,并将要传递的数据设置为this.innerHTML。在handleDragOver事件中,阻止默认的拖拽行为,并设置拖拽效果为move。在handleDrop事件中,将被拖动元素与目标元素进行数据交换。最后,通过addEventListener方法,将相应的事件绑定到元素上,以便进行拖放操作。
阅读全文