Javascript可拖动函数

Question

我目前正在做我的项目，使拖放。我计划创建一个可拖动的克隆(这可以让它在div中移动)，将它放入‘div=’dropzone‘中。下面是脚本。

脚本：

<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中创建一个克隆。我需要一种方法来使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

他们也有你所问的类似的事情，我会张贴链接，但我没有所需的代表。查看draggable widget的events部分。

这将是一个针对所需事件操作JQuery的简单案例。