Javascript - 可拖動函數

Question

我目前正在做我的項目，使其能夠拖放。我打算在它放入'div =「dropzone」'之後創建克隆變成可拖動的（可以使它在div上移動）。以下是腳本。

腳本：

<script> 
var box = document.getElementById("div1"); 

var boxLeft = box.offsetLeft; 
var boxTop = box.offsetTop; 
box.ondrop = drop; 
box.ondragover = allowDrop; 

var img = document.getElementById("drag1"); 
img.onmousedown = mousedown; 
img.ondragstart = dragstart; 


var startOffsetX, startOffsetY; 

function allowDrop(ev) { 
    ev.preventDefault(); 
} 


function mousedown(ev) { 
    startOffsetX = ev.offsetX; 
    startOffsetY = ev.offsetY; 
} 




function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 

} 

function drop(ev) { 

    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    var nodeCopy = document.getElementById(data).cloneNode(true); 
    var dropX = ev.clientX - 650; 
    var dropY = ev.clientY- 45; 
    nodeCopy.setAttribute("style","position:absolute; top:" + dropY + "px; left:" + dropX + "px;"); 
    ev.target.appendChild(nodeCopy); 
    ev.stopPropagation(); 
    return false; 


} 

HTML

<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event) " > Drop here </div> 
<img id="drag1" src="images/shoe.jpg" draggable="true" ondragstart="drag(event)" onclick="click(event)" width="100" height="100"> 
<img id="drag2" src="images/LZK-Logo.jpg" draggable="true" ondragstart="drag(event)" width="100" height="100"> 

我將拖動使懸浮窗內的克隆圖像（drag1和drag2）到懸浮窗。我需要一種方法使dropzone內的克隆可以在dropzone周圍移動（可拖動），而無需再次進行克隆。希望有人能幫忙。

Answer 1

JQuery UI在JQuery/Javascript庫之上構建了一組效果，小部件和主題，他們提供了類似的東西，也許你應該檢查它。

https://jqueryui.com/

這是相當簡單，也可以使用，請檢查下面的例子後，所需的jar文件添加它很簡單，只要如下：

HTML：

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me around</p> 
</div> 

CSS ：

<style> 
     #draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 

腳本：

<script> 
    $(function() { 
     $("#draggable").draggable(); 
    }); 
    </script> 

活生生的例子：

https://jqueryui.com/draggable

他們也有你問，我會的鏈接後有什麼類似的事情，但我沒有要求的代表。查看可拖動小部件的事件部分。

這將是一個簡單的情況下操縱JQuery到你需要的事件。