通过鼠标拖动和释放来改变可拖动元素的位置

Question

我制作了一个可拖放的元素。我想通过抓住它并将其拖动到允许放置的 div 中来更改元素的位置。这是拖放的代码：

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

#div1, #div2 {
  float: left;
  width: 200px;
  height: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img class="poto" src="img_logo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

这里是jquery中的位置变化代码

 <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <script>
        $(function() {

            $(".ui-widget-content").draggable({
                grid: [2, 2]
            });

        });
    </script>
    
    
     <img  class="draggable ui-widget-content" class="poto" src="img_w3slogo.gif" draggable="true" id="drag1" width="88" height="31">
       

但是当我将两者用作相同的代码时，这不起作用。

请解决这个问题，我会非常感谢你。

Answer 1

您也可以使用 jquery.ui.js 库，这使您的代码非常简单 jquery-ui library

请参考文档 jquery-ui docs