Question

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

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

非常感谢， LS

Answer 1

请参阅http://jqueryui.com/demos/droppable/#photo-manager以获取示例 - 诀窍是使用$( ".selector" ).draggable( "option", "helper", 'clone' );

之类的东西克隆原始元素

Answer 2

这是预期任务的运行示例 -

＆＃13;

$(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'
                });
            }
        }
    });

});

＆＃13;

 #draggable {
     width: 20px;
     height: 20px;
     background:blue;
     display:block;
     float:left;
     border:0px
 }
 #container {
     width:200px;
     height:200px;
     background:yellow;
     margin:25px;

＆＃13;

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
    <div id="draggable" class="ui-widget-content"></div>
</div>
<div id="container" class="ui-widget-content">Drop blue box here..</div>

＆＃13;

链接到JS小提琴 http://jsfiddle.net/4VRUK/

根据需要进一步改进。

Answer 3

添加helper: clone option。

Answer 4

将helper: clone添加到选项。如果希望原始对象保持可见状态，则必须明确设置：

$(".sortable").sortable({
    helper: 'clone',
    start: function(event, ui) {
        $(ui.item).show()
    }

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

4 个答案: