您的位置：首页 > 其它

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

2014-09-03 08:37 351 查看

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航