拖動對象時更改拖動對象開始

我想創建一些像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，它會做類似的事情，我希望能夠在拖動開始時克隆它。 –

我可能會感覺到可拖動的實際上並不是要這樣做，因爲我們不是在上下文中拖動元素。 –

拖動對象時更改拖動對象開始

回答

相關問題