Javascript - draggable function

Question

私は現在、ドラッグ＆ドロップを可能にする私のプロジェクトを行っています。私はクローンを作成する計画です（それは、divの中にドロップした後、divを移動することができます）draggableになります 'div = "dropzone"'。以下はスクリプトです。

スクリプト：私はドロップゾーン内のクローンを作るドロップゾーンにイメージ（drag1とdrag2）をドラッグします

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

。そして、私は、ドロップゾーン内のクローンを、クローンを再作成せずにドロップゾーンの周りを移動（ドラッグ可能）できるようにする方法が必要です。誰かが助けることを願っています。

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を操作するのは簡単なケースです。