`
lushuaiyin
  • 浏览: 674957 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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>


分享到：
| spring配置中parent和abstract作用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery.ui.draggable.js

    JQuery的插件，实现拖拽效果所需要的插件，jquery.ui.draggable.js

    jquery ui draggable拖动 demo

    使用jquery ui 的draggable实现的 div包裹的元素拖动到表格里，已经拖到表格里的div可以在tbody范围内的td间拖动的demo

    JQuery UI/API/1.7 中文帮助文档

    可拖动的元素得到一个ui-draggable类. 拖动中的元素始终得到ui-draggable-dragging类. 假如你不仅仅只想要拖动,而是想要拖动并且填充,那么请看看jQuery UI Droppable 插件,它提供一个可以被填充的目标. 所有的回调...

    jquery-ui包含功能演示及代码

    　jQuery UI 主要分为3个部分：交互、微件和效果库。 交互 　交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。 微件 　主要是一些界面的扩展，包括Accordion,...

    jqueryUI-multiimage-draggable:jQuery UI 多图可拖动示例

    jqueryUI-multiimage-draggable 这个脚本结合了 Javascript、jQuery 和 jQuery UI 的许多不同方面： Sortable：ui 助手、数组操作、类操作 Droppable：可接受的项目、类操作、动画 我一直在广泛研究图像管理应用...

    jQuery-ui Demo 官方UI插件

    最新官方jQuery UI插件 主流特效Demo，绝不含糊。 好东西不需要过多的言辞修饰，下了就知道！ 所有效果说明： 基本的鼠标互动： 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...

    JQuery拖拽使用文档

    JQuery拖拽使用文档，描述的如何使用jquery.ui.draggable.js和jquery.ui.droppable.js实现拖拽效果

    jquery-ui-1.10.4.custom.zip

    交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等。 小部件（Widgets） 主要是一些界面的扩展，包括折叠面板...

    jquery-ui.css

    JQuery的插件，实现拖拽效果所需要的插件，jquery.ui.draggable.js

    jquery-ui.js

    JQuery的插件，实现拖拽效果所需要的插件，jquery.ui.draggable.js

    jquery-ui-draggable:jquery-ui的自定义构建（仅包含可拖动组件）

    安装 通过凉亭安装 bower install jquery-ui-draggable

    jQuery实现自定义区域的拖动效果.rar

    jQuery自定义区域的拖动效果，同样是基于jQuery UI实现的网页交互特效，可以让网页层中的某个DIV在横向、竖向及指定区域范围内拖动，比如沿X轴拖动时，被拖动的层是不能在Y方向上拖动的；另外一种还可以在网页中任意...

    李炎恢JQueryEasyUI视频培训教程_EasyUI是基于jQuery的UI插件集合

    教程名称： 李炎恢JQuery EasyUI视频培训教程_EasyUI是基于jQuery的UI插件集合01.[jQuery EasyUI]第1章 jQuery EasyUI入门02.[jQuery EasyUI]第2章 使用EasyUI03.[jQuery EasyUI]第3章 Draggable(拖动)组件04....

    jQuery-ui-1.8.19

    　jQuery UI 主要分为3个部分：交互、微件和效果库。 交互 　交互部件是一些与鼠标交互相关的内容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。 微件 　主要是一些界面的扩展，包括Accordion,...

    jQuery-Draggable-Touch:DraggableDroppable jQuery UI 翻版，适用于手机和平板电脑

    jQuery-Draggable-Touch 可拖放/可拖放的翻版，适用于移动设备和平板电脑。 使用 translateX/Y 而不是 top/left。 使用作为转换参数。 添加功能 多点触控：可以同时拖动多个对象！bug $('.draggable').draggable...

    jQuery UI结合CSS3可拖拽半透明窗口

    今天我们要分享一款可以拖拽的小窗口程序，这个窗口特效是利用jQuery UI和CSS3制作而成的，窗口是半透明的，可以用鼠标拖拽，配合大气的山水背景图，显得非常壮观。拖拽功能是jQuery实现的，另外窗口的透明外观，...

    jquery.ui.draggable中文文档(原文翻译)

    [原文翻译]JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅...

    JQuery UI Draggable Collision-开源

    与jquery-ui-draggable 1.9.2+和jquery-collision 1.0.2+结合使用。 拖动时提供碰撞事件，并处理避免碰撞。 冲突和遏制设置是分层且可扩展的，从而允许复杂的交互。 试试看：http://eruciform.com/jquidragcollide/

    jq-ui-draggable-collision:Sean Cusack 的 jquidragcollide 插件的镜像和分叉存储库

    JQuery UI 可拖动碰撞安装将 jquery-ui-draggable-collision.js 或任何特定或缩小版本的 jquery-ui-draggable-collision(-xxx)(.min).js 复制到您的 javascript 目录中确保 jquery 1.10.1 或更高版本可访问确保 ...

    Vue组件Draggable实现拖拽功能

    Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 具体说明，请参考：学习链接 npm官方演示： vuedraggable特性： 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery...

Magicbox
Global site tag (gtag.js) - Google Analytics