sortable - selectable jquery ui



jQuery的UI-可拖動的助手克隆 (1)

預先感謝您看看這個!

我的目標:

  • 在將對象拖放到藝術畫布上時,對象的原始(或複制)必須保留在頂部的“工具欄”中,以便用戶可以反複使用它。

  • 一旦拖動的對像被拖放到藝術畫布上,如果用戶決定將其拖動到整個畫布上,則需要拖動它

發生什麼事:

  • (完成)對象正在按預期方式克隆並放到畫布上
  • 一旦被拖放,該對像不再可以在畫布上拖動。 我試圖找出如何保持拖放一旦下降。

克隆選項是我能夠創建一個可拖動對象的新實例的唯一方式,也許我正在考慮錯誤的方向。

我正在創建一個克隆:

$(".objectDrag").draggable({
    helper:'clone'
});  

$("#artCanvas").droppable({
    accept: ".objectDrag",
    drop: function(event,ui){
        var new_smiley = $(ui.helper).clone();
        $(this).append(new_smiley );
    }
});

這裡是一個JSFiddle的視覺發生了什麼: http : //jsfiddle.net/YRfVd/55/

請讓我知道,如果我不清楚或可以提供進一步的解釋。 再一次,非常感謝你花時間看這個 - 你們真棒!

彌敦道


您可以通過draggable()函數初始化克隆的draggable()功能,並刪除class objectDrag以使新添加的對像不會開始創建自己的克隆。

$(".objectDrag").draggable({
    helper:'clone'
});  

$("#artCanvas").droppable({
    accept: ".objectDrag",
    drop: function(event,ui){
        var new_signature = $(ui.helper).clone().removeClass('objectDrag');
        new_signature.draggable();
        $(this).append(new_signature);
    }
});

JSFiddle: http : //jsfiddle.net/YRfVd/56/





drag-and-drop