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内进行克隆。 而且我需要一种方法来使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

他们对您的要求也有类似的事情，我会发布链接，但我没有所需的代表。 查看可拖动小部件的事件部分。

这将是对需要的事件进行操作的简单案例。