jquery ui 学习可拖拽的效果（draggable）
2012-04-09 14:38
549 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery UI 跟随学习笔记——拖拽（Draggable）
- jquery UI 跟随学习笔记——拖拽（Draggable）
- 使用jQuery UI的draggable和droppable完成拖拽功能--介绍
- jquery UI 实例——拖拽（Draggable）
- jquery-UI学习笔记1之拖拽(Draggable)
- Vue.Draggable实现拖拽效果
- [转载]jquery ui(二）draggable,droppable 学习总结
- [转载]jquery ui(二）draggable,droppable 学习总结
- jQuery UI-draggable参数学习
- WEB前端开发学习----11. JQuery 实现简单的拖拽效果
- UIView-draggable 可拖拽的UIView
- jQuery插件2（拖拽draggable/放置droppable/排序sortable/面板折叠accordion/横向选项卡tabs/对话框dialog/menu/微调spinner/框提示）
- [JavaScript学习]用面向对象方法实现拖拽效果
- 带拖拽效果的红点提示控件 DragIndicatorView
- Android DragAndDrop API 拖拽效果 交换ListView的Item值
- jQuery使用drag效果实现自由拖拽div
- easyUI中两个layout之间元素的拖拽（draggable）或节点被覆盖的原因
- Jquey拖拽控件Draggable使用方法(asp.net环境)
- jQuery ui draggable 拖拽元素
- Javascript基于jQuery UI实现选中区域拖拽效果