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

我会使用帮助程序选项设置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中，以确保保留附加元素的绝对定位。

jquery ui drop不使用helper clone

1 个答案: