删除jQuery draggable移动

Question

我已经设置了一个简单的拖放界面来实现克隆功能.我遇到的问题是,当元素被拖动到主画布然后掉落时,它会突然向右移动,而不是准确地拖到我拖动它的位置.

这是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/

如果您尝试将蓝色框拖动到主画布中然后释放鼠标,您将看到该框如何"弹出"到右侧.当您在画布中移动框时,它可以正常工作.在小提琴上,它没有在浏览器上的全宽时那么糟糕,我认为它相对于视口的总宽度.

如果有人知道为什么会这样,我会很感激:)

谢谢迈克尔

Answer 1

之所以出现这种情况,是因为拖动时,可拖动元素相对于视口绝对定位.一旦附加了元素,定位就相对于#canvas元素(因为position: relative),这就是元素在放下时移动的原因.

正如另一个答案建议的那样,你可以position: relative从元素中删除,但这可能不适用于所有情况.我建议在添加元素之前考虑元素的位置.

更新的示例

例如,您可以减去偏移的顶部/左侧定位以及边框的宽度.在这样做时,#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');