使用draggable插件实现对象的拖曳操作8-1

最新推荐文章于 2024-05-05 11:59:49 发布

weixin_33753845

最新推荐文章于 2024-05-05 11:59:49 发布

阅读量89

点赞数

原文链接：https://my.oschina.net/u/2552902/blog/543868

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用draggable插件实现对象的拖曳操作</title>
<script type="text/javascript" src="lib/jquery-2.1.1.js"></script>
<script type="text/javascript" src="lib/jquery-ui.js"></script>
<style type="text/css">
	body{font-size:13px}
	.div{margin:5px}
	.divFrame{border:dashed 1px #ccc;background-color:#eee;height:68px;width:200px;}
	.divDrag{border:solid 1px #ccc;background-color:#eee;cursor:move;width:40px;padding:20px;text-align:center}
</style>
<script type="text/javascript">
	$(function(){
		$("#divDragD").draggable({opacity:0.35});
		$("#divDragX").draggable({axis:"x",opacity:0.35});
		$("#divDragC").draggable({containment:"parent",opacity:0.35,revert:true});
	})
</script>
</head>
<body>

	<div id="divDragD" class="divDrag">随意</div>
	<div class="divFrame">
		<div id="divDragX" class="divDrag">X轴</div>
	</div>
	<div class="divFrame">
		<div class="divDrag" id="divDragC">父窗口</div>
	</div>
</body>
</html>

draggable的使用说明：http://blog.csdn.net/dunyanan1/article/details/7404467

转载于:https://my.oschina.net/u/2552902/blog/543868