如何制作该标签的另一个图像(通过拖动),而不影响原始图像
how to make another image of this tag (by dragging) which does not effect the original one
当你运行这个代码时,会有一个框"Drag me Down",我需要将它向下拖动,以在不影响原始框的情况下(每次拖动它(复制同一个框。我应该在代码中进行哪些更改才能获得如上所述的期望结果。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
revert: "true",
helper:"clone"
});
$( "#sortable" ).draggable({
//connectToSortable: "#sortable",
helper: "clone",
revert: "valid"
//var dra = jQuery.extend({}, draggable)
});
//$( "ul, li" ).disableSelection();
});
</script>
</head>
<body>
<ul>
<li id="sortable" class="ui-state-highlight">Drag me down</li>
</ul>
</body>
</html>
您可以使用jQuery .clone()
函数来实现您想要的功能。
更改代码
$(function() {
$( "#sortable" ).sortable({
revert: "true",
helper:"clone"
});
$( "#sortable" ).draggable({
//connectToSortable: "#sortable",
helper: "clone",
revert: "valid",
stop:function(){
$(this).clone().appendTo("body");
}
//var dra = jQuery.extend({}, draggable)
});
//$( "ul, li" ).disableSelection();
});
FIDDLE
相关文章:
- 我怎么能把它做成这样一个图像就不能拖动了
- 是否可以在jquery中使用拖动滑块在4个图像之间滑动
- 无法为HTML5中具有画布和图像的可拖动元素设置“拖动图像”
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- 将复选框转换为图像,需要添加拖动功能才能更改图像
- 防止图像拖动,但其他任何内容
- 当图像大小大于最小标准时拖动图像
- JavaScript-拖动图像-最多3个
- 如何添加可拖动的“;添加图像”;jquery中的图标
- javascript中的图像拖动
- Jquery可拖动UI |将图像拖动到容器中时更改图像大小
- 角度图像拖动和调整大小
- D3.js SVG 图像拖动有效,但引发许多类型错误
- 如何防止图像另存为+防止图像拖动&拖放到桌面+阻止桌面浏览器上的屏幕截图
- 停止用作图像拖动目标的文本区域
- 使用dragstartpreventdefault来禁用浏览器默认的图像拖动,但它也禁用了我的拖动事件
- 将一个图像拖动到另一个图像上,并将其保存到一个图像(如光增强现实)
- HTML5图像拖动,调整大小,上传动画gif
- JS库,用于图像拖动、滚动和缩放+谷歌地图等图片上的标记
- 图像拖动'n'插入在文本/内部元素之间移动的内容可编辑元素