Question

我一直在尝试使用jQuery将div从一个div拖动到另一个div。这就是我到目前为止所得到的

$(document).ready(function() {
  $(".draggable").draggable();
  $(".bucket").droppable({
    drop: function(event, ui) {
      if (($(this).attr('id')) !== ui.draggable.attr("data-bucket")) {
        ui.draggable.attr("data-bucket", $(this).attr('id'));

        var p1 = ui.draggable.parent().offset();
        $(this).append(ui.draggable);

        var p2 = ui.draggable.parent().offset();

        ui.draggable.css({
          top: parseInt(ui.draggable.css('top')) + (p1.top - p2.top),
          left: parseInt(ui.draggable.css('left')) + (p1.left - p2.left)
        });
      }
    }
  });
});

.bucket {
  width: 400px;
  height: 150px;
  background: #ddd
}

.draggable {
  width: 50px;
  height: 30px;
  margin-top: 5px;
  background: red;
}

#destination {
  background: #aaa
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="bucket" id="origin">
  <div class="draggable" data-bucket="origin">Drop 1</div>
  <div class="draggable" data-bucket="origin">Drop 2</div>
  <div class="draggable" data-bucket="origin">Drop 3</div>
  <div class="draggable" data-bucket="origin">Drop 4</div>
</div>
<div class="bucket" id="destination">
</div>

我从this答案中改编了js，但是为了处理多个可拖动元素，我使用了data-bucket属性仅在元素最初放入存储桶时才应用定位每次它在里面移动。

从示例中可以看到，这种解决方案很有效，但是一旦将两个以上的div拖到目标存储桶中，它们就会开始跳来跳去，而不会降落在光标放置它们的位置

似乎应该是一个简单的修复程序，但是现在我已经花了一天左右的时间挠头，有什么帮助吗？

Answer 1

我将<svg viewBox="0 0 28.3 28.3" className="App-icon"> <use xlinkHref="./sprite#square" /> </svg> divs CSS设置为a_1 = np.array([1.0, 2.0, 3.0]) a_2 = np.array([[1., 2.], [3., 4.]]) b = 2.0，将父级设置为a_1 * b = array([2.0, 4.0, 6.0]); a_2 * b = array([[2., 4.], [6., 8.]])。另外，还需要进行一些调整，以初始显示绝对位置的div并在删除之后显示状态。

请查看下面的代码：

.draggable

position: absolute

position: relative

将多个div拖到另一个jQuery

1 个答案: