Question

我正在使用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？

Answer 1

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

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

handle选项是一个选择器，用于定位容器中的元素，因此您可以通过为图像提供一个类名来更具体，如果您在div中有多个图像，则需要这个名称，但仅限于想要某个图像作为拖动处理程序。

来自docs

手柄

如果指定，则限制从开始拖动，除非在指定元素上发生了mousedown。只允许从可拖动元素下降的元素。

Answer 2

这是拖放的快速解决方案：

<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>

通过拖动动态创建DIV

2 个答案: