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

我想创建一些像UI设计器的东西。所以我有一个'工具箱'和'画布'。当我将工具箱项标记为可拖动时，我可以拖动它们。但我需要的是拖动副本，以便可以将工具项的多个实例拖动到画布上。拖动对象时更改拖动对象开始

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

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

注意：我不能使用停止事件，因为我想在拖动开始时创建副本，而不是在它之后创建副本。我还能够通过将画布定义为可拖放并在其中创建副本来创建副本，但是当拖动开始时，我又想创建一个副本。

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

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

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

来源

2016-11-07 abhinav pandey

能否请你解释一下，为什么要在拖动的开始你的克隆元素，但不是结束了吗？ –

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

我明白了......请在下面检查我的答案，我按照这个要求编辑它，可能这会起作用。 –

为了保持“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

来源

2016-11-07 19:10:55

谢谢你。这接近我所需要的。让我朝着正确的方向前进。 –

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

来源

2016-11-07 19:04:48 roemhildtg

对不起，但没有。如果你看到我发布的jsfiddle，它会做类似的事情，我希望能够在拖动开始时克隆它。 –

我可能会感觉到可拖动的实际上并不是要这样做，因为我们不是在上下文中拖动元素。 –

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

回答

相关问题