当可拖动开始时更改拖动的对象-Java 学习之路

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

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

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

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

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

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

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

2 回答

要保持“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

回复于 2024-04-27T01:27:20+08:00

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

编辑：我更新了你的小提琴：https://jsfiddle.net/z9rrL6po/6/
回复于 2024-04-27T01:27:20+08:00

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

2 回答

相关问题