通过拖动移动动态创建的 DIV

Moving dynamically created DIV by dragging

本文关键字：创建 DIV 动态 移动 拖动      更新时间：2023-09-26

我正在使用JavaScript动态创建div元素，每个div中还有一个移动图标，用户可以使用它来拖动/移动div，这是我的div创建代码：

            var _body = document.getElementsByTagName('body')[0];
        var _div = document.createElement('div');
        _div.style.width = "250px";
        _div.style.height = "150px";
        _div.style.position = "relative";
        _div.id = "div" + count.toString();
        var imgMove = document.createElement("img");
        imgMove.setAttribute("src", "boxmove.png");
        _div.appendChild(imgMove);

当用户拖动移动图标时，如何使用 JQuery draggable（） 函数来移动我的div，任何其他解决方案？

将handle选项设置为 img，这意味着图像将用作拖动手柄。

_body.appendChild(_div);
$(_div).draggable({ handle: "img" });

handle 选项是针对容器内元素的选择器，因此您可以通过为图像指定类名来更具体，如果div 中有多个图像，但只需要某个图像作为拖动处理程序，则需要该类名。

从文档中

处理

如果指定，则限制拖动开始，除非鼠标按下发生在指定的元素上。仅允许从可拖动元素派生的元素。

以下是拖放的快速解决方案：

<script type="text/javascript">
function allowDrop(ev){
    ev.preventDefault();
}
function drag(ev){
    ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev){
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

这是 HTML 标记：

<style type="text/css">
[ondragover] {width:200px;height:200px; outline: 1px solid #ccc}
[draggable] {width:48px;height:48px;background-color:#999; border:1px solid #eaeaea;position:relative}
[draggable]:hover {cursor:pointer}
</style>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2"ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
    <div id="drag2" draggable="true" ondragstart="drag(event)"></div>
    <div id="drag3" draggable="true" ondragstart="drag(event)"></div>
    <div id="drag4" draggable="true" ondragstart="drag(event)"></div>
</div>
相关文章：