jquery ui drop 不适用于助手克隆

Question

我使用 jquery ui 进行了简单的拖放操作。我想克隆元素并将克隆放在光标位置。

$(function() {
    $( "#draggable" ).draggable({
        grid: [ 20, 20 ],
        //helper: 'clone',
    });

    $("#dropzone-panel").droppable({
        drop: function(event, ui) {
            console.log("Drop Event Fired");
        }
    });

});

我可以拖动元素，当我放下它时，它会保持在正确的位置。

但我不想移动原件，我想克隆它，然后将克隆放置到位。

我尝试调用 clone 并在 drop 函数中添加一个 appendTo，但这只是将它附加到 #dropzone-panel 的末尾，而不是将它留在原处。

知道我需要做什么，克隆并放在光标位置吗？

Answer 1

我会使用 helper 选项设置 draggable，然后使用 accept 选项设置 droppable。这可能看起来像：

$(function() {
  $(".draggable").draggable({
    helper: 'clone',
    grid: [ 20, 20 ],
    appendTo: ".droppable"
  });
  $(".droppable").droppable({
    accept: ".draggable",
    drop: function(e, ui) {
      var pos = ui.position;
      var $obj = ui.helper.clone();
      $obj.css({
        position: 'absolute',
        top: pos.top + "px",
        left: pos.left + "px"
      });
      $obj.appendTo(".droppable");
    }
  });
});

您将需要使用 CSS 将 Droppable 包装在具有 position: relative; 的 Div 中，以确保保持附加元素的绝对定位。