Question

我正在尝试创建一些像UI设计师的东西。所以我有一个'工具箱'和'画布'。当我将工具箱项目标记为可拖动时，我可以拖动它们。但我需要的是拖动一个副本，以便我可以将工具项的多个实例拖到画布上。

$('.tool-box-item').draggable({
    helper : 'clone',
    drag : function (event, ui){
        // jQuery does not allow object modification here
    },
});

这不起作用，因为仅在拖动时应用克隆，并且一旦拖动完成，原始元素就会移动。我尝试覆盖拖动属性，但我无法修改拖动的元素。开始的情况也是如此。

注意：我不能使用stop事件，因为我想在拖动开始时而不是在它之后创建副本。我还可以通过将画布定义为droppable并在那里制作副本来创建副本，但是我又要在拖动开始时创建副本。

我想我需要创建一个自定义拖动函数，但希望jQuery还有其他任何替代方法。

这是一个jsfiddle，但我想在开始时而不是在拖动之后克隆元素。

编辑：目的地是第三方控件。它有自己的drop事件实现（堆叠和对齐）。如果我最后克隆它，我将不得不修改它们的实现。

Answer 1

要保留“dragend”事件，请尝试使用原始元素进行拖动，然后将其克隆到“工具箱”中。

var graggableConfig = {
  helper:"clone",
  stop: function(event, ui){
    var clon = $(this).clone();
    clon.attr("style","")
    .appendTo(".src")
    .draggable(graggableConfig);
    $(this).detach()
    .attr("style","")
    .appendTo(".dst")
    .draggable( "destroy" );
  }
}; 
$(".item").draggable(graggableConfig);

codepen here

Answer 2

您可以使用jquery的clone（https://api.jquery.com/clone/）方法在删除可拖动元素后将其克隆。这样的事情会满足你的需求吗？

$( function() {
    makeDraggable($( "#draggable" ));
});

function makeDraggable(element) {
    $(element).attr('style', 'position:absolute').draggable({
        start: function() {
             makeDraggable($('#draggable').clone().attr('style', '').appendTo('body'));
        }
    });
}

它有点粗糙，但这里是jsbin：https://jsbin.com/tasodixoka/edit?html,output

编辑：我更新了你的小提琴：https://jsfiddle.net/z9rrL6po/6/

当可拖动开始时更改拖动的对象

2 个答案: