jquery UI拖拽插件Draggable的使用
来源：互联网 发布：深入php 编辑：程序博客网 时间：2024/05/22 06:48
1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable();
<title>jqeruy UI 拖拽练习--默认配置</title><!--导入jquery插件--><script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script><!--导入jqueryUI插件--><script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script><link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/><!--自写脚本--><script type="text/javascript" language="javascript"> //在页面加载完之后加载jquery $().ready(function(e) { //拖拽函数 $('#draggable').draggable();});</script><!--自写脚本--><style type="text/css"> #draggable { width:150px; height:150px; }</style></head><body><div id="draggable" class="ui-widget-content"> <p>您可以四处随便拖拽我！</p></div></body>
2、自动滚动：scroll设置为true，表示启用滚动条跟随；scrollSensitivity和scrollSpeed是设置滚动条跟随速度的效果
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--滚动条自动滚动</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //拖拽函数,这样配置只是控制了垂直滚动条（这个可以通过设置scroll为false测试知道)15 $('#draggable').draggable({ scroll:true});16 $('#draggable1').draggable({scroll:true,scrollSensitivity:100});17 $('#draggable2').draggable({scroll:true,scrollSpeed:100});18 });19 </script>20 <!--自写脚本-->21 <style type="text/css">22 #draggable,#draggable1,#draggable223 {24 width:200px;25 height:200px;26 float:left;27 margin:5px;28 }29 </style>30 </head>31 32 <body>33 <div id="draggable" class="ui-widget-content">34 <p>Scroll属性设置为true,其他默认</p>35 </div>36 <div id="draggable1" class="ui-widget-content">37 <p>Scroll属性设置为true,scrollSensitivity属性设置为100,其他默认</p>38 </div>39 <div id="draggable2" class="ui-widget-content">40 <p>Scroll属性设置为true,scrollSpeed属性设置为100,其他默认</p>41 </div>42 <div style="height: 5000px; width: 1px;"></div>43 </body>
3、移动限制：axis是控制移动方向的属性；containment是控制元素移动范围的属性
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--移动限制</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //拖拽函数15 $('#draggable').draggable({ axis:"y"});16 $('#draggable2').draggable({axis:"x"});17 18 $('#draggable3').draggable({containment:"#containment-wrapper",scroll:false});19 $('#draggable5').draggable({containment:"parent"});20 });21 </script>22 <!--自写脚本-->23 <style type="text/css">24 .draggable { width: 190px; height: 190px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }25 #draggable, #draggable2 { margin-bottom:20px; }26 #draggable { cursor: n-resize; }27 #draggable2 { cursor: e-resize; }28 #containment-wrapper { width: 95%; height:350px; border:2px solid #ccc; padding: 10px; }29 h3 { clear: left; }30 </style>31 </head>32 33 <body>34 <h3>限制运动方向:</h3>35 <div id="draggable" class="draggable ui-widget-content">36 <p>我只能在<b>垂直方向</b>拖拽</p>37 </div>38 <div id="draggable2" class="draggable ui-widget-content">39 <p>我只能在<b>水平方向</b>拖拽</p>40 </div>41 <h3>或只能在一个元素中拖拽:</h3>42 <div id="containment-wrapper">43 <div id="draggable3" class="draggable ui-widget-content">44 <p>我被限制在这个框中拖拽</p>45 </div>46 <div class="draggable ui-widget-content">47 <p id="draggable5" class="ui-widget-header">我被限制在父级框中拖拽</p>48 </div>49 </div>50 51 </body>
4、光标样式：cursor设置光标样式；cursorAt设置鼠标位置
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--光标样式</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //拖拽函数15 $('#draggable_cursor_center').draggable({ cursor:"move",cursorAt:{top:56,left:56}});16 $('#draggable_cursor_leftup').draggable({cursor:"corsshair",cursorAt:{top:-5,left:-5}});17 18 $('#draggable_cursor_bottom').draggable({cursorAt:{bottom:0}});19 });20 </script>21 <!--自写脚本-->22 <style type="text/css">23 #draggable_cursor_center,#draggable_cursor_leftup,#draggable_cursor_bottom { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }24 </style>25 </head>26 27 <body>28 <div id="draggable_cursor_center" class="ui-widget-content">29 <p>光标位置一直在中心</p>30 </div>31 <div id="draggable_cursor_leftup" class="ui-widget-content">32 <p>光标在 left -5 和 top -5的左上角</p>33 </div>34 <div id="draggable_cursor_bottom" class="ui-widget-content">35 <p>光标位置限制在下方</p>36 </div>37 </body>
5、延时启动：distance设置像素，delay设置延时毫秒数
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--延时启动</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //按下鼠标，滑动20像素，启动拖动15 $('#draggable').draggable({ distance:20});16 //按下鼠标，等待1000毫秒，启动拖动17 $('#draggable2').draggable({delay:1000});18 });19 </script>20 <!--自写脚本-->21 <style type="text/css">22 #draggable,#draggable1,#draggable223 {24 width:120px;25 height:120px;26 float:left;27 margin:5px;28 }29 </style>30 </head>31 32 <body>33 <div id="draggable" class="ui-widget-content">34 <p>按下鼠标，滑动20像素，启动拖拽</p>35 </div>36 <div id="draggable2" class="ui-widget-content">37 <p>按下鼠标，等待1000毫秒，启动拖拽</p>38 </div>39 40 </body>
6、事件：start触发启动事件，drag触发拖拽事件，stop触发结束事件
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习-事件</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //定义变量15 var $start_counter=$('#event-start'),16 $drag_counter=$('#event-drag'),17 $stop_counter=$('#event-stop'),18 counts=[0,0,0];19 20 $("#draggable").draggable({21 start:function(){22 //启动开始，总数+123 counts[0]++;24 //修改状态25 updateCounterStatus($start_counter,counts[0]);26 } ,27 drag:function(){28 //拖拽，总数+129 counts[1]++;30 //修改状态31 updateCounterStatus($drag_counter,counts[1]);32 },33 stop:function(){34 //结束开始，总数+135 counts[2]++;36 //修改状态37 updateCounterStatus($stop_counter,counts[2]);38 }39 });40 41 //修改状态42 function updateCounterStatus($event_counter,new_count)43 {44 //判断是否存在该样式45 if(!$event_counter.hasClass("ui-state-hover"))46 {47 $event_counter.addClass("ui-state-hover")48 .siblings().removeClass("ui-state-hover");49 }50 //修改数据51 $("span.count",$event_counter).text(new_count);52 }53 });54 </script>55 <!--自写脚本-->56 <style type="text/css">57 #draggable { width: 16em; padding: 0 1em; }58 #draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }59 #draggable ul li span.ui-icon { float: left; }60 #draggable ul li span.count { font-weight: bold; }61 </style>62 </head>63 64 <body>65 <div id="draggable" class="ui-widget ui-widget-content">66 <p>拖拽我来触发事件链</p>67 <ul class="ui-helper-reset">68 <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"开始" 调用 <span class="count">0</span>x</li>69 <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"拖拽" 调用 <span class="count">0</span>x</li>70 <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"结束" 调用 <span class="count">0</span>x</li>71 </ul>72 </div>73 </body>
7、Handles(不清楚该怎么翻译)：handle设置可以拖拽的元素，cancel禁用不能拖拽的元素
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--Handles</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //通过P元素拖动15 $("#draggable").draggable({handle:"p"});16 // 禁用样式为ui-widget-header的P元素的拖拽17 $("#draggable2").draggable({cancel:"p.ui-widget-header"});18 //19 $("div,p").disableSelection();20 });21 </script>22 <!--自写脚本-->23 <style type="text/css">24 #draggable, #draggable2 { width: 100px; height: 200px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }25 #draggable p { cursor: move; }26 </style>27 </head>28 29 <body>30 <div id="draggable" class="ui-widget-content">31 <p class="ui-widget-header">32 我只能用这个手柄拖拽</p>33 </div>34 <div id="draggable2" class="ui-widget-content">35 <p>你能四处拖拽我…</p>36 <p class="ui-widget-header">…但是，用这个手柄你不能拖拽我.</p>37 </div>38 </body>
8、复位：revert设置是否可以复位，helper这个属性我不知道该怎么解释
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--恢复到原来位置</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //通过P元素拖动15 $("#draggable").draggable({revert:true});16 // 禁用样式为ui-widget-header的P元素的拖拽17 $("#draggable2").draggable({revert:true,helper:"clone"});18 //19 20 });21 </script>22 <!--自写脚本-->23 <style type="text/css">24 #draggable, #draggable2 { width: 150px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }25 </style>26 </head>27 28 <body>29 <div id="draggable" class="ui-widget-content">30 <p>恢复到原来位置</p>31 </div>32 <div id="draggable2" class="ui-widget-content">33 <p>Revert the helper</p>34 </div>35 </body>
9、扑捉元素或网格：
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--扑捉元素或网格</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //扑捉所有可以拖拽的元素15 $("#draggable").draggable({snap:true});16 //扑捉样式为ui-widget-header元素17 $("#draggable2").draggable({snap:".ui-widget-header"});18 //扑捉样式为ui-widget-header元素的外边19 $("#draggable3").draggable({snap:".ui-widget-header",snapModel:"outer"});20 //扑捉宽或者高为20的网格21 $("#draggable4").draggable({grid:[20,20]});22 //扑捉宽或者高为80的网格23 $("#draggable5").draggable({grid:[80,80]});24 });25 </script>26 <!--自写脚本-->27 <style type="text/css">28 .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }29 .ui-widget-header p, .ui-widget-content p { margin: 0; }30 #snaptarget { height: 140px; }31 </style>32 </head>33 34 <body>35 36 <div id="snaptarget" class="ui-widget-header">37 <p>我是一个扑捉（快照）标签</p>38 </div>39 <br style="clear:both">40 <div id="draggable" class="draggable ui-widget-content">41 <p>默认 (snap: true),捕捉所有其他可拖动的元素.</p>42 </div>43 <div id="draggable2" class="draggable ui-widget-content">44 <p>我只扑捉 the big box.</p>45 </div>46 <div id="draggable3" class="draggable ui-widget-content">47 <p>我只捕捉 the big box 的外边.</p>48 </div>49 <div id="draggable4" class="draggable ui-widget-content">50 <p>我捕捉一个20×20 的网格.</p>51 </div>52 <div id="draggable5" class="draggable ui-widget-content">53 <p>我捕捉一个 80 x 80 的网格.</p>54 </div>55 </body>
10、视觉反馈：
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--视觉反馈</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //拖拽原控件15 $("#draggable").draggable({helper:"original"});16 //拖拽复制体17 $("#draggable2").draggable({opacity:0.7,helper:"clone"});18 //19 $("#draggable3").draggable({20 cursor:"move",21 cursorAt:{top:-12,left:-20},22 helper:function(event){23 return $("<div class='ui-widget-header'>我是一个自定义helper</div>");24 }25 });26 //27 $("#set div").draggable({stack:"#set div"});28 });29 </script>30 <!--自写脚本-->31 <style type="text/css">32 #draggable, #draggable2, #draggable3, #set div { width: 150px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }33 #draggable, #draggable2, #draggable3 { margin-bottom:20px; }34 #set { clear:both; float:left; width: 368px; height: 120px; }35 p { clear:both; margin:0; padding:1em 0; }36 </style>37 </head>38 39 <body>40 41 <h3 class="docs">With helpers:</h3>42 <div id="draggable" class="ui-widget-content">43 <p>Original</p>44 </div>45 <div id="draggable2" class="ui-widget-content">46 <p>半透明克隆</p>47 </div>48 <div id="draggable3" class="ui-widget-content">49 <p>自定义 helper (与 cursorAt 组合)</p>50 </div>51 <h3 class="docs">Stacked:</h3>52 <div id="set">53 <div class="ui-widget-content">54 <p>We are draggables..</p>55 </div>56 <div class="ui-widget-content">57 <p>..whose z-indexes are controlled automatically..</p>58 </div>59 <div class="ui-widget-content">60 <p>..with the stack option.</p>61 </div>62 </div>63 64 </body>
11、拖拽排序：
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>jqeruy UI 拖拽练习--拖拽排序</title> 4 <!--导入jquery插件--> 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js"></script> 6 <!--导入jqueryUI插件--> 7 <script type="text/javascript" src="../../js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script> 8 <link rel="stylesheet" type="text/css" href="../../js/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css"/> 9 10 <!--自写脚本-->11 <script type="text/javascript" language="javascript">12 //在页面加载完之后加载jquery13 $().ready(function(e) {14 //15 $("#sortable").sortable({ revert:true});16 //拖拽函数17 $('#draggable').draggable({18 connectToSortable:"#sortable",19 helper:"clone",20 revert:"invalid"21 });22 $("ul,li").disableSelection();23 });24 </script>25 <!--自写脚本-->26 <style type="text/css">27 ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }28 li { margin: 5px; padding: 5px; width: 150px; }29 </style>30 </head>31 32 <body>33 34 <ul>35 <li id="draggable" class="ui-state-highlight">拖拽我下来</li>36 </ul>37 <ul id="sortable">38 <li class="ui-state-default">Item 1</li>39 <li class="ui-state-default">Item 2</li>40 <li class="ui-state-default">Item 3</li>41 <li class="ui-state-default">Item 4</li>42 <li class="ui-state-default">Item 5</li>43 </ul>44 45 </body>
阅读全文
0 0
- jquery UI拖拽插件Draggable的使用
- jquery.ui.draggable使用
- jQuery UI调用draggable之后无法拖拽的解决办法
- jQuery ui draggable 拖拽元素
- jQuery-UI draggable的参数
- JQuery UI Draggable插件详细使用说明
- 【JQuery UI】拖曳插件——draggable
- Jquery UI resizable和draggable共同使用
- jquery-UI学习笔记1之拖拽(Draggable)
- JQuery UI - draggable
- jquery UI draggable学习
- Jquery UI draggable学习
- jquery ui draggable
- jquery拼图，draggable插件
- jquery.ui.draggable中文文档.
- jQuery UI - draggable 中文API
- jquery.ui.draggable中文文档
- jquery.ui.draggable中文文档
- Android UI之最优ListView写法
- ffprobe Documentation
- qt-solutions提供了8个开源项目
- 梯度提升树(GBDT)原理小结
- Oracle命令行导入导出远程服务器的表数据
- jquery UI拖拽插件Draggable的使用
- mount -t cgroup
- Hadoop 键值对的mapreduce过程剖析
- VMware Workstation创建新的虚拟机
- C++ 23树
- HTTP 状态码
- zookeeper授权
- 图的表现和实现2（邻接矩阵表表示法）
- JAVA防止盗链的小demo
