发布于 2023-09-21 11:22:55 浏览 147 次
<div id="myDiv" draggable="true">
拖拽我
</div>
HTML 代码:
3、
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
cursor: move;
}
CSS 代码:
4、
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
myDiv.addEventListener("dragover", function(event) {
event.preventDefault();
});
myDiv.addEventListener("drop", function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var draggedElement = document.getElementById(data);
draggedElement.style.left = event.clientX + "px";
draggedElement.style.top = event.clientY + "px";
});
JavaScript 代码: 在上述示例中,我们给 myDiv 元素添加了 draggable 属性,并使用 CSS 设置其样式。然后,我们使用 JavaScript 添加了拖拽事件监听器来处理拖拽开始、拖拽进入和拖拽结束的逻辑。
5、
在拖拽开始时,我们使用 event.dataTransfer.setData() 将被拖拽元素的 ID 存储在数据传输对象中。当元素被拖拽到其他元素上方时,我们使用 event.preventDefault() 阻止默认行为,以便使其成为一个有效的拖拽目标。最后,当元素被释放时,我们使用 event.dataTransfer.getData() 获取存储的 ID,并根据鼠标位置设置被拖拽元素的新位置。
6、
请注意,这只是一个简单的示例,可以根据实际需求进行扩展和修改。此外,还可以使用一些现成的 JavaScript 库或框架,如 jQuery UI、React DnD 或 Vue Draggable 等,来简化拖拽布局的实现过程。