jquery-UI学习笔记1之拖拽(Draggable)

最新推荐文章于 2023-09-11 19:06:44 发布

lqiujh

最新推荐文章于 2023-09-11 19:06:44 发布

阅读量1.3k

点赞数

分类专栏： jquery-UI 文章标签： class stylesheet function scroll distance float

本文链接：https://blog.csdn.net/lqiujh/article/details/6658933

版权

这篇博客介绍了jQuery UI库中关于拖拽(Draggable)的功能，包括默认的拖拽操作以及设置拖拽的最小距离限制，讲解了如何实现元素在达到一定距离后才开始拖动的效果。

摘要由CSDN通过智能技术生成

提高交互性的五种方式：拖拽、消息、变化大小、选择、排序。

这篇日记主要记录下http://jqueryui.com/demos提供的拖拽的demo

DEMO1：简单的默认功能的拖拽

<html>
	<head>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
		
		<style>
			#draggable {width:150px; height:150px; padding:0.5em;}
		</style>
		<script type="text/javascript">
			$(function(){
				$("#draggable").draggable();
			});
		</script>
		
	</head>s
	<body>
		<div id="demo">
			<div id="draggable" class="ui-widget-content">
				<p>drag me</p>
			</div>
		</div>
	</body>
</html>

DEMO2：重写了EVENT回调函数（start drag stop)，并实现对触发动作的计数

<html>
	<head>
		<link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
		
		<style>
			<!-- em是相对的大小，px是绝对的大小；em在缩放时用到 -->
			#draggable {width: 16em; padding: 0.1em;}
			#draggable ul li{margin: 1em 0; padding: 0.5em 0;}
			#draggable ul li span.ui-icon{float: left;}
			#draggable ul li span.count{font-weight: bold;}
		</style>
		<script type="text/javascript">
			$(fu