我正在使用 Jquery 拖放功能，并且我想保留正在拖动的元素的副本。
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable"
//helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function( event, ui ) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.appendTo(droppable);
draggable.css({top: '5px', left: '5px'});
}
});
JSFiddle http://jsfiddle.net/wf325n4q/
因此，如果我将红色方块拖到灰色框中，红色方块的副本将保留在同一位置，并且我可以拖动任意数量。
Thanks.
You can clone()然后附加元素
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function (event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
//draggable.css({top: '5px', left: '5px'});
}
});
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
draggable.clone().appendTo(droppable);
draggable.css({float:'left'});
}
});
.draggable {
width: 50px;
height: 50px;
background: red;
}
.droppable {
width: 150px;
height: 150px;
background: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="droppable"></div>
<div class="draggable"></div>
Update :
$('.draggable').draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
$('.droppable').droppable({
accept: ".draggable",
drop: function(event, ui) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
revert: "invalid",
stack: ".draggable",
helper: 'clone'
});
drag.appendTo(droppable);
draggable.css({
float: 'left'
});
}
});
.draggable {
width: 50px;
height: 50px;
background: red;
}
.droppable {
width: 150px;
height: 150px;
background: lightgrey;
margin: 5px;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="droppable"></div><div class="droppable"></div><div class="droppable"></div><div class="droppable"></div>
<div class="draggable"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
