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

Question

我正在尝试创建一些类似于 UI 设计师的东西。所以我有一个 'toolbox' 和一个 'canvas'。当我将工具箱项目标记为可拖动时，我可以拖动它们。但我需要的是拖一个副本，这样我就可以将一个工具项的多个实例拖到 canvas.

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

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

注意：我无法使用停止事件，因为我想在拖动开始时而不是之后创建副本。我还可以通过将 canvas 定义为可放置并在那里制作副本来创建副本，但是我又想在拖动开始时创建副本。

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

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

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

Answer 1

您可以使用 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

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

Answer 2

要保留 "dragend" 事件，请尝试使用原始元素进行拖动，并将其克隆到您的 "toolbox"。

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);

代码笔here

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

Change the dragged object when draggable begins

javascript

jquery

jquery-ui-draggable