通過拖動動態創建DIV

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中有多個圖像，但只需要某個圖像作為拖動，則需要該類名稱處理程序。

來自文檔

處理

如果指定，則限制從開始拖動，除非在指定元素上發生了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>