Question

嘿，我遇到的问题是以下jQuery Draggale / droppable UI：

当首先将 awesome 文本拖到 pdfCanvas div中时，它可以正常工作。虽然在第一个之后，当你再次将 awesome 文本拖到 pdfCanvas 时，它会复制两次，而不是像第一个那样重复一次。

此外，当您尝试移动 pdfCanvas 中的真棒文本时，它会移动所有 awesome 当前在那里的文字。

JS：

$(".resize-drag").draggable({
  helper: 'clone',
  cursor: 'move',
  revert: true,
  grid: [5, 5]
});

$("#pdfCanvas").droppable({
  accept: '.resize-drag',
  drop: function(e, ui) {
    if ($(ui.draggable)[0].id != "") {
      x = ui.helper.clone();
      ui.helper.remove();
      x.draggable({
        helper: 'original',
        cursor: 'move',
        drop: function(event, ui) {
          $(ui.draggable).remove();
        }
      });

      x.appendTo('.resize-drag');
    }
  }
});

如果有人看到了并且知道如何纠正这个问题会很好！

Answer 1

好的，你的问题是你将新的克隆附加到resize-drag。因此，您在要克隆的对象中包含新对象。

我为你创建了一个新的JSFiddle，看它是否有效。需要稍微调整才能获得正确的位置。但我希望这能指出你正确的方向。

JSFiddle

$("#pdfCanvas").droppable({
  accept: '.resize-drag',
  drop: function(e, ui) {
    if ($(ui.draggable)[0].id != "") {
      var clone = ui.draggable.clone(false);
      clone.css('left', ui.offset.left)
           .css('top', ui.offset.top)
           .css('position', 'absolute')
           .removeClass('ui-draggable ui-draggable-dragging resize-drag')
           .addClass('dropped-element');
      $('#pdfCanvas').append(clone);
      $(clone).draggable({
        containment: 'parent'
      });
    }
  }
});

function addDraggable(){
  $(".resize-drag").draggable({
  helper: 'clone',
  cursor: 'move',
  revert: true,
  grid: [5, 5]
  });
}

addDraggable();

Answer 2

检查my trial in JSFiddle。我想它会对你有帮助。

 $(".resize-drag").draggable({
  helper: 'clone',
  cursor: 'move',
  connectToSortable: "#pdfCanvas",
  revert: 'invalid',
  cursor: 'move',
  grid: [5, 5]
});

$("#pdfCanvas").sortable({
items: '.resize-drag',
connectWith: '#pdfCanvas',  

});

jQuery UI可拖动和可放置的重复问题

2 个答案: