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操作到您需要的事件是一个简单的例子。

Javascript - 可拖动功能

1 个答案: