Jquery UI - 拖動形狀，但保留原始形狀的副本？

Question

我有一個有趣的問題。理論上，假設您在左側有一個導航欄，並帶有一系列形狀：圓形，方形和三角形，導航欄右側有空白畫布。

使用JQuery UI或JQuery Mobile，是否可以將導航欄中的形狀拖動到畫布上，但原始形狀仍然保留在欄中？

非常感謝， LS

Answer 1

爲例見http://jqueryui.com/demos/droppable/#photo-manager - 關鍵是要克隆使用一些原始的元素像$(".selector").draggable("option", "helper", 'clone');

Answer 2

添加helper: clone option。

Answer 3

我剛纔做的工作

$(function() { 

$("#draggable").draggable({ 
    helper: "clone", 
    cursor: 'move' 
}); 
$("#container").droppable({ 
    drop: function (event, ui) { 
     var $canvas = $(this); 
     if (!ui.draggable.hasClass('canvas-element')) { 
      var $canvasElement = ui.draggable.clone(); 
      $canvasElement.addClass('canvas-element'); 
      $canvasElement.draggable({ 
       containment: '#container' 
      }); 
      $canvas.append($canvasElement); 
      $canvasElement.css({ 
       left: (ui.position.left), 
       top: (ui.position.top), 
       position: 'absolute' 
      }); 
     } 
    } 
}); 

}）;只要你想

http://jsfiddle.net/4VRUK/

進一步改善。