Question

我有几个代表我的组件的div。这个组件我想拖放到我的Gridsystem。但我需要克隆它们。所以他们仍然在组件菜单中，所以我可以拖动更多。

    GRIDSYSTEM
    $('#GridDiv').droppable({
    accept: ".draaa",
        drop: function (event, ui) {
        var draggable = ui.draggable;
        var offset = draggable.offset();

        draggable.appendTo( this ).offset( offset );
            draggable.resizable({
            // animate: true
            grid: 10,
            containment: "#GridDiv",
            stop: function(event, ui) {
                var width = ui.size.width;
                var height = ui.size.height;
                $('#width').text('width: ' + ui.size.width);
                $('#height').text('height: ' + ui.size.height);
                },
            });
        }
    });

    DRAGCOMPONENTS
     $('.draaa').draggable({ 
    grid: [ 20, 20 ],
    drag: function(event, ui){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
       // $('#xFOR').text('x: ' + xPos);
       // $('#yFOR').text('y: ' + yPos);
    },
    start: function( event, ui ) {
    var ID = event.originalEvent.target.id;

    //$(this).append($(ui.helper).clone());
    //alert(event.originalEvent.target.id);
    //alert(typeof(ID));
    var original = $(ID);
    var newClone = original.clone();

    }

    });

我“想”我应该在开始时做一些事情。有人有任何暗示吗？还是想法？我从中获取ID om元素 var ID = event.originalEvent.target.id;

Answer 1

只需将可拖动的the helper option设置为'clone'即可。将克隆该元素并拖动克隆，请参见下面的示例：

$(function() {

$(".draggable").draggable({
	grid: [ 20, 20 ],
	appendTo: '#droppable',
    containment: "window",
	cursor: 'move',
	revertDuration: 100,
	revert: 'invalid',
	helper: 'clone'
});

$("#droppable").droppable({
    accept: ".draggable",
	drop: function (event, ui) {
		ui.helper.clone().appendTo('#droppable');
    }
});


});

.draggable { width: 90px; height: 80px; border: red 1px solid; }
#droppable { height: 140px; border: black 1px solid;}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

<div id="droppable">
	<p>droppable</p>
</div>
<br style="clear:both">
<div id="storage">
	<div class="draggable">
		<p>draggable-1</p>
	</div>
	<div class="draggable">
		<p>draggable-2</p>
	</div>
	<div class="draggable">
		<p>draggable-3</p>
	</div>
</div>

当我开始将其拖放到我的网格系统时克隆元素

1 个答案: