javascript Jquery UI - 拖动形状，但保留原始形状的副本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7878980/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI - Drag shape, but keep a copy of the original shape?
提问by jcrowson
I have an interesting question. Theoretically, let's say you have a navigation bar on the left with a series of shapes: a circle, square and triangle and to the right of the nav bar you have a blank canvas.
我有一个有趣的问题。从理论上讲，假设您在左侧有一个导航栏，其中包含一系列形状：圆形、正方形和三角形，而在导航栏的右侧，您有一个空白画布。
Using Jquery UI or Jquery Mobile, would it be possible to be able to drag shapes from the navigation bar onto the canvas, but for the original shape to still remain in the bar?
使用 Jquery UI 或 Jquery Mobile，是否可以将形状从导航栏拖到画布上，但原始形状仍保留在栏中？
Many thanks, LS
非常感谢，LS
回答by Blazemonger
See http://jqueryui.com/demos/droppable/#photo-managerfor an example -- the trick is to clone the original element using something like $( ".selector" ).draggable( "option", "helper", 'clone' );
参见http://jqueryui.com/demos/droppable/#photo-manager的例子——诀窍是使用类似的东西克隆原始元素$( ".selector" ).draggable( "option", "helper", 'clone' );
回答by Haris Amjed
Here is Running Example for intended task -
这是预期任务的运行示例 -
$(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'
});
}
}
});
}); #draggable {
width: 20px;
height: 20px;
background:blue;
display:block;
float:left;
border:0px
}
#container {
width:200px;
height:200px;
background:yellow;
margin:25px;<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>Link To JS Fiddle http://jsfiddle.net/4VRUK/
链接到 JS Fiddle http://jsfiddle.net/4VRUK/
improve it further as you want.
根据需要进一步改进它。
回答by SLaks
Add the helper: cloneoption.
回答by Adam Starrh
Add helper: cloneto the options. If you want the original object to remain be visible, you must set this explicitly:
添加helper: clone到选项。如果您希望原始对象保持可见，则必须明确设置：
$(".sortable").sortable({
helper: 'clone',
start: function(event, ui) {
$(ui.item).show()
}
