javascript - jQuery draggable 在放下时移动

Question

我已经设置了一个简单的拖放界面来实现克隆功能。我遇到的问题是，当元素被拖到主 Canvas 然后放下时，它突然向右移动，而不是准确地放在我拖动它的地方。

这是javascript:

$(function() {
  var x = null;

  $("#draggable").draggable({
    helper: 'clone',
    cursor: 'move',
    snap: '.snap-target'
  });

  $("#canvas").droppable({
    drop: function(e, ui) {
      if ($(ui.draggable)[0].id != "") {
        x = ui.helper.clone();
        ui.helper.remove();
        x.draggable({
          helper: 'original',
          containment: '#canvas',
          snap: '.snap-target'
        });
        x.appendTo('#canvas');
      }
    }
  });

});

我创建了一个 jsfiddle:

https://jsfiddle.net/kuyn6gmc/

如果您尝试将蓝色框拖到主 Canvas 中，然后松开鼠标，您将看到该框如何稍微向右“弹出”。当您在 Canvas 内移动框时，它工作正常。在 fiddle 上，它不像在浏览器上全宽时那么糟糕，我认为它与视口(viewport)的总宽度有关。

如果有人知道为什么会发生这种情况，我将不胜感激:)

谢谢迈克尔

Answer 1

发生这种情况的原因是可拖动元素在被拖动时相对于视口(viewport)是绝对定位的。追加元素后，定位是相对于 #canvas 元素(因为 position: relative)，这就是元素在您放下时移动的原因。

正如另一个答案所建议的，您可以从元素中删除 position: relative，但是，这可能不会在所有情况下都有效。我建议在附加元素之前考虑元素的定位。

Updated Example

例如，您可以减去顶部/左侧定位的偏移量，以及边框的宽度。这样做时，#canvas 元素仍然可以相对定位。

var canvasOffset = {
  'top': parseInt($(this).offset().top, 10) + parseInt($(this).css('border-top-width'), 10),
  'left': parseInt($(this).offset().left, 10) + parseInt($(this).css('border-left-width'), 10)
}

$draggble.css({
  "top": parseInt($draggble.css('top'), 10) - canvasOffset.top + 'px',
  "left": parseInt($draggble.css('left'), 10) - canvasOffset.left + 'px'
}).appendTo('#canvas');