jquery ui 学习可拖拽的效果(draggable)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Constrain movement</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	#draggable, #draggable2 { margin-bottom:20px; }
	#draggable { cursor: n-resize; }
	#draggable2 { cursor: e-resize; }
	#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
	</style>
	<script>
	//可拖拽的div对其方向,范围进行控制
	$(function() {
		$( "#draggable" ).draggable({ axis: "y" });
		$( "#draggable2" ).draggable({ axis: "x" });
 
		$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
		$( "#draggable4" ).draggable({ containment: "#demo-frame" });
		$( "#draggable5" ).draggable({ containment: "parent" });
	});
	</script>
</head>
<body>
 
<div class="demo">
 
<h3 class="docs">约束沿一个轴的运动:</h3>
	
<div id="draggable" class="draggable ui-widget-content">
	<p>我只可以垂直拖动</p>
</div>
 
<div id="draggable2" class="draggable ui-widget-content">
	<p>我只可以水平拖动</p>
</div>
 
<h3 class="docs">或在另一个DOM元素:</h3>
<div id="containment-wrapper">
<div id="draggable3" class="draggable ui-widget-content">
	<p>我限制在box里</p>
</div>
 
<div id="draggable4" class="draggable ui-widget-content">
	<p>我限制在box的父元素里</p>
</div>
 
<div class="draggable ui-widget-content">
	<p id="draggable5" class="ui-widget-header">我限制在我的父元素里</p>
</div>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>按定义拖动面积界限限制每个拖动的运动。设置轴选项限制X或Y轴拖动的路径,或使用遏制选项指定一个父DOM元素或一个jQuery选择器,如“文件。”</p>
</div><!-- End demo-description -->
 
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Cursor style</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
		$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
		$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
	});
	</script>
</head>
<body>
 
<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>我将始终跟在中心(相对于鼠标)</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
	<p>我将始终跟在相对左边 -5 相对上边边 -5</p>
</div>
 
<div id="draggable3" class="ui-widget-content">
	<p>我将始终跟在底部</p>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>拖动对象时,将光标定位。默认情况下,光标出现在拖动对象的中心;使用的cursorAt的选项来指定另一个相对位置的拖动(从顶部,右,下,和/或左指定的像素值)。自定义光标的外观,提供一个有效的CSS光标价值的光标选项:默认情况下,移动,指针,十字等。...</p>
</div><!-- End demo-description -->
 
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Delay start</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ distance: 20 });
		$( "#draggable2" ).draggable({ delay: 1000 });
		$( ".ui-draggable" ).disableSelection();
	});
	</script>
</head>
<body>
 
<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>只有当你拖我由20个像素,将开始拖动</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
	<p>拖动开始前等待为1000毫秒</p>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>设置延迟多少毫秒才开始拖动;设置当移动了多少像素才认为开始移动。<br>
其实这样做的目的就是对移动进行精确的确定,用户可能没想移动这个div,但鼠标一点击就”不小心“移动了,<br>
有了对距离和时间的设置就能更好的符合用户要求。</p>
</div><!-- End demo-description -->
 
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Events</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable { width: 16em; padding: 0 1em; }
	#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
	#draggable ul li span.ui-icon { float: left; }
	#draggable ul li span.count { font-weight: bold; }
	</style>
	<script>
	$(function() {
		var $start_counter = $( "#event-start" ),
			$drag_counter = $( "#event-drag" ),
			$stop_counter = $( "#event-stop" ),
			counts = [ 0, 0, 0 ];
 
		$( "#draggable" ).draggable({
			start: function() {
				counts[ 0 ]++;
				updateCounterStatus( $start_counter, counts[ 0 ] );
			},
			drag: function() {
				counts[ 1 ]++;
				updateCounterStatus( $drag_counter, counts[ 1 ] );
			},
			stop: function() {
				counts[ 2 ]++;
				updateCounterStatus( $stop_counter, counts[ 2 ] );
			}
		});
 
		function updateCounterStatus( $event_counter, new_count ) {
			// first update the status visually...
			if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
				$event_counter.addClass( "ui-state-hover" )
					.siblings().removeClass( "ui-state-hover" );
			}
			// ...then update the numbers
			$( "span.count", $event_counter ).text( new_count );
		}
	});
	</script>
</head>
<body>
 
<div class="demo">
 
<div id="draggable" class="ui-widget ui-widget-content">
 
	<p>Drag me to trigger the chain of events.</p>
 
	<ul class="ui-helper-reset">
		<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" 事件激活 <span class="count">0</span>x</li>
		<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" 事件激活  <span class="count">0</span>x</li>
		<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" 事件激活  <span class="count">0</span>x</li>
	</ul>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>到使用开始拖动拖动和停止事件层的功能。开始在拖动开始时被解雇,
在拖动的阻力;拖动停止时停止。
<br>
对拖动事件的捕捉当然是不可缺少的,这里jquery ui提供了这样的功能。
<br>
</p>
</div><!-- End demo-description -->
 
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Handles</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	#draggable p { cursor: move; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ handle: "p" });
		$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
		$( "div, p" ).disableSelection();
	});
	</script>
</head>
<body>
 
<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p class="ui-widget-header">可以通过这里拖动我</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
	<p>你可以通过我身边的区域来拖动我;</p>
	<p class="ui-widget-header">这里不能拖动我</p>
</div>
 
<!-- ADD CANCEL DEMO -->
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>允许拖动只有当光标在一个可拖动的特定部分。
使用手柄选项来指定用于拖动对象(或一组元素)元素的jQuery选择器。
或防止拖动光标时,是在一个特定元素在拖动(或一组元素)。
使用cancel选项来指定一个jQuery选择器,其中“取消”拖动功能。
<br>
有时我们不想通过div拖动,只想通过一部分区域拖动。
<br>就像我们想通过一个把手来拖动一个物体.
<br>这里我们就可以实现这个把手。
</p>
</div><!-- End demo-description -->
 
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable - Revert position</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.7.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	</style>
	<script>
	$(function() {
		$( "#draggable" ).draggable({ revert: true });
		$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
	});
	</script>
</head>
<body>
 
<div class="demo">
	
<div id="draggable" class="ui-widget-content">
	<p>回到原始的位置</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
	<p>助手可以回到原始位置。</p>
</div>
 
</div><!-- End demo -->
 
 
 
<div class="demo-description">
<p>这里实现可以拖动一个div,但松开鼠标的时候就回到原始位置。通过revert属性设置</p>
</div><!-- End demo-description -->
 
</body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值