0

我正在使用 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，还有其他解决方案吗？

4

2 回答 2

1

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

<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>
于 2013-11-04T07:32:53.820 回答
1

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

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

该handle选项是一个选择器，用于定位容器中的元素，因此您可以通过为图像指定类名来更具体，如果您在 div 中有多个图像，但只希望某个图像作为拖动处理程序，则需要使用该类名.

从文档

处理

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

于 2013-11-04T07:31:10.797 回答