如何在 drop Destination jQuery 中设置可拖动对象

Question

我使用可拖动对象，并且我对最终目的地有问题，当我在Dropbox创建元素中按“添加项目”时，我想拖动此元素“最终目的地”框，由于某种原因，它不是放在框中而是放在外面，我认为问题是对于第一个“顶部，左侧”位置，当我放入新框时，我看到左侧和顶部位置没有改变，在放置位置更新后我可以工作，但对我来说这不好。

我如何删除上一个位置“顶部，左侧”或如何从“顶部，左侧”中减去以放在框内而不是放在框外。

在这里你可以看到它是如何从盒子中取出的示例：

我用代码创建jsFiddle 。

JS：

 $(document).ready(function () {
    $("#addBtn").click(function () {
        var $div = $("<div>", { "class": "alert alert-info draggable alwaysTop", text: "Say-Da-Tay!" }).draggable();

        $("#dropbox").prepend($div);
    });

    $(".droppable").droppable({
        accept: ".draggable", drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = $(this);
            $(dropped).detach().appendTo(droppedOn);
        }
    });
   
});

我发现的一种解决方案设置位置：

$(dropped).detach().css({left: 0, top: 0}).appendTo(droppedOn);

但在这种情况下，不可能将元素拖动到我想要的位置，它总是连接到左角。我坚持这个问题，但无法解决这个问题:(

Answer 1

我一直在尝试让它与您的代码一起工作，但这样做并不容易。

问题是，您具有相对定位，并且这些元素一旦脱离上下文，就会保留相对父级，因此所有偏移量仍然基于前一个父级，即dropbox. 所以你必须重新计算位置偏移。

较旧的解决方案

这不是完美的解决方案，但您可以根据需要进行调整。

$(document).ready(function() {
  $("#addBtn").click(function() {
    const $div = $("<div>", {
      class: "alert alert-info draggable alwaysTop",
      text: "Say-Da-Tay!"
    }).draggable({
        revert: 'invalid',
        cursor: 'move',
    });
    $("#dropbox").prepend($div);
  });

  $(".droppable").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      const draggable = ui.draggable;
      const $droppable = $(this);
      // this part here could be improved - works only roughly
      const draggableHalfWidth = draggable.outerWidth() / 2;
      const draggableHalfHeight = draggable.outerHeight() / 2;
      // --
      $(draggable).detach().css({
        position: 'absolute',
        left: event.pageX - $droppable.offset().left - draggableHalfWidth,
        top: event.pageY - $droppable.offset().top + draggableHalfHeight,
      }).appendTo($droppable);
    }
  });
});

我还添加了一个移动光标和一个重置功能，如果您不将其放在.droppable.

我也手动增加了拖放区的高度，因为现在必须对大小进行硬编码，因为它仅包含不影响容器高度/宽度的静态内容。

对于 z 索引：您有 3 个同级元素，其中一个同级元素的一个子级想要将该元素绘制在其他元素之上。Z-index 在 DOM 中起作用。因此，您可以设置较高的 z-index 来解决此问题，也可以在 DOM 中的更高级别上创建元素。

https://jsfiddle.net/r6hk74zs/

更新的解决方案：

我又做了一些实验。您可以使用：

      $(draggable).detach().css({
        position: 'absolute',
        left: ui.offset.left - $droppable.offset().left + 15 + 1,
        top: ui.offset.top,
      }).appendTo($droppable);

反而。等式中的15是填充，并且1我们必须包含边框（因为填充不适用，并且边框也不适用，因为我们使用静态定位）。

这个想法是，如果您单击右侧容器上的某个位置，则单击偏移量将比放置区的偏移量（放置区的左上角）更向右。由于我们的新定位现在是相对于新的父级（放置区），因此我们必须考虑填充和边框大小（从左侧看）。.draggable由于容器仍位于同一垂直线上，因此顶部偏移量保持不变。

https://jsfiddle.net/osmp76j5/