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

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

这将是一个将 JQuery 操作到您需要的事件的简单案例。