Jquery UI - 拖动形状,但保留原始形状的副本？

Question

我有一个有趣的问题.从理论上讲,假设您左侧有一个导航栏,其中包含一系列形状:圆形,正方形和三角形,导航栏右侧有一个空白画布.

使用Jquery UI或Jquery Mobile,是否可以将导航栏中的形状拖动到画布上,但是原始形状仍然保留在栏中？

非常感谢,LS

Answer 1

有关示例,请参阅http://jqueryui.com/demos/droppable/#photo-manager - 诀窍是使用类似的东西克隆原始元素$( ".selector" ).draggable( "option", "helper", 'clone' );

Answer 2

我刚刚完成了

$(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/

根据需要进一步改进.