jQuery UI 可拖放重复问题

Question

嘿，我遇到以下问题 jQuery Draggale/droppable UI:

当我 first 将 awesome 文本拖到 pdfCanvas div。尽管在第一个之后，当您再次将 awesome 文本拖入 pdfCanvas 时，它会复制两次而不是像第一次那样复制一次一.

此外，当您尝试移动 pdfCanvas 中的 awesome 文本时，它会移动 all 的很棒文本，目前在那里。

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

好的，您的问题是您将新克隆附加到调整大小拖动。因此，您将新对象包含在您正在克隆的对象中。

我创建了一个新的 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 可拖放重复问题

jQuery UI draggable and droppable duplicate issue

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable