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/

进一步改善。