引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI 插件,以及jquery库学习。 我用了两天的时候熟悉Interactions模块中的Draggable功能,并跟随练习,写这篇博文就是想记录下自己的心得体会。 正文:Draggable(拖拽) 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是设置滚动条跟随速度的效果 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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) { //拖拽函数,这样配置只是控制了垂直滚动条(这个可以通过设置scroll为false测试知道) $('#draggable').draggable({ scroll:true}); $('#draggable1').draggable({scroll:true,scrollSensitivity:100}); $('#draggable2').draggable({scroll:true,scrollSpeed:100}); }); </script> <!--自写脚本--> <style type="text/css"> #draggable,#draggable1,#draggable2 { width:200px; height:200px; float:left; margin:5px; } </style> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Scroll属性设置为true,其他默认</p> </div> <div id="draggable1" class="ui-widget-content"> <p>Scroll属性设置为true,scrollSensitivity属性设置为100,其他默认</p> </div> <div id="draggable2" class="ui-widget-content"> <p>Scroll属性设置为true,scrollSpeed属性设置为100,其他默认</p> </div> <div style="height: 5000px; width: 1px;"></div> </body> 效果是滚动条自动跟随 3、移动限制:axis是控制移动方向的属性;containment是控制元素移动范围的属性 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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({ axis:"y"}); $('#draggable2').draggable({axis:"x"}); $('#draggable3').draggable({containment:"#containment-wrapper",scroll:false}); $('#draggable5').draggable({containment:"parent"}); }); </script> <!--自写脚本--> <style type="text/css"> .draggable { width: 190px; height: 190px; 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:350px; border:2px solid #ccc; padding: 10px; } h3 { clear: left; } </style> </head> <body> <h3>限制运动方向:</h3> <div id="draggable" class="draggable ui-widget-content"> <p>我只能在<b>垂直方向</b>拖拽</p> </div> <div id="draggable2" class="draggable ui-widget-content"> <p>我只能在<b>水平方向</b>拖拽</p> </div> <h3>或只能在一个元素中拖拽:</h3> <div id="containment-wrapper"> <div id="draggable3" class="draggable ui-widget-content"> <p>我被限制在这个框中拖拽</p> </div> <div class="draggable ui-widget-content"> <p id="draggable5" class="ui-widget-header">我被限制在父级框中拖拽</p> </div> </div> </body> 效果是可以控制元素的移动方向和移动范围 4、光标样式:cursor设置光标样式;cursorAt设置鼠标位置 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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_cursor_center').draggable({ cursor:"move",cursorAt:{top:56,left:56}}); $('#draggable_cursor_leftup').draggable({cursor:"corsshair",cursorAt:{top:-5,left:-5}}); $('#draggable_cursor_bottom').draggable({cursorAt:{bottom:0}}); }); </script> <!--自写脚本--> <style type="text/css"> #draggable_cursor_center,#draggable_cursor_leftup,#draggable_cursor_bottom { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> </head> <body> <div id="draggable_cursor_center" class="ui-widget-content"> <p>光标位置一直在中心</p> </div> <div id="draggable_cursor_leftup" class="ui-widget-content"> <p>光标在 left -5 和 top -5的左上角</p> </div> <div id="draggable_cursor_bottom" class="ui-widget-content"> <p>光标位置限制在下方</p> </div> </body> 效果是光标样式和位置发生变化 5、延时启动:distance设置像素,delay设置延时毫秒数 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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) { //按下鼠标,滑动20像素,启动拖动 $('#draggable').draggable({ distance:20}); //按下鼠标,等待1000毫秒,启动拖动 $('#draggable2').draggable({delay:1000}); }); </script> <!--自写脚本--> <style type="text/css"> #draggable,#draggable1,#draggable2 { width:120px; height:120px; float:left; margin:5px; } </style> </head> <body> <div id="draggable" class="ui-widget-content"> <p>按下鼠标,滑动20像素,启动拖拽</p> </div> <div id="draggable2" class="ui-widget-content"> <p>按下鼠标,等待1000毫秒,启动拖拽</p> </div> </body> 效果是延时启动拖拽 6、事件:start触发启动事件,drag触发拖拽事件,stop触发结束事件 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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) { //定义变量 var $start_counter=$('#event-start'), $drag_counter=$('#event-drag'), $stop_counter=$('#event-stop'), counts=[0,0,0]; $("#draggable").draggable({ start:function(){ //启动开始,总数+1 counts[0]++; //修改状态 updateCounterStatus($start_counter,counts[0]); } , drag:function(){ //拖拽,总数+1 counts[1]++; //修改状态 updateCounterStatus($drag_counter,counts[1]); }, stop:function(){ //结束开始,总数+1 counts[2]++; //修改状态 updateCounterStatus($stop_counter,counts[2]); } }); //修改状态 function updateCounterStatus($event_counter,new_count) { //判断是否存在该样式 if(!$event_counter.hasClass("ui-state-hover")) { $event_counter.addClass("ui-state-hover") .siblings().removeClass("ui-state-hover"); } //修改数据 $("span.count",$event_counter).text(new_count); } }); </script> <!--自写脚本--> <style type="text/css"> #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> </head> <body> <div id="draggable" class="ui-widget ui-widget-content"> <p>拖拽我来触发事件链</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>"开始" 调用 <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>"拖拽" 调用 <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>"结束" 调用 <span class="count">0</span>x</li> </ul> </div> </body> 效果是可以通过拖拽触发事件链 7、Handles(不清楚该怎么翻译):handle设置可以拖拽的元素,cancel禁用不能拖拽的元素 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jqeruy UI 拖拽练习--Handles</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) { //通过P元素拖动 $("#draggable").draggable({handle:"p"}); // 禁用样式为ui-widget-header的P元素的拖拽 $("#draggable2").draggable({cancel:"p.ui-widget-header"}); // $("div,p").disableSelection(); }); </script> <!--自写脚本--> <style type="text/css"> #draggable, #draggable2 { width: 100px; height: 200px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable p { cursor: move; } </style> </head> <body> <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> </body> 效果是我们想怎么控制拖拽就怎么控制 8、复位:revert设置是否可以复位,helper这个属性我不知道该怎么解释 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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) { //通过P元素拖动 $("#draggable").draggable({revert:true}); // 禁用样式为ui-widget-header的P元素的拖拽 $("#draggable2").draggable({revert:true,helper:"clone"}); // }); </script> <!--自写脚本--> <style type="text/css"> #draggable, #draggable2 { width: 150px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } </style> </head> <body> <div id="draggable" class="ui-widget-content"> <p>恢复到原来位置</p> </div> <div id="draggable2" class="ui-widget-content"> <p>Revert the helper</p> </div> </body> 效果是拖拽到他处的元素在放开控制的时候可以回到原来的位置 9、扑捉元素或网格: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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({snap:true}); //扑捉样式为ui-widget-header元素 $("#draggable2").draggable({snap:".ui-widget-header"}); //扑捉样式为ui-widget-header元素的外边 $("#draggable3").draggable({snap:".ui-widget-header",snapModel:"outer"}); //扑捉宽或者高为20的网格 $("#draggable4").draggable({grid:[20,20]}); //扑捉宽或者高为80的网格 $("#draggable5").draggable({grid:[80,80]}); }); </script> <!--自写脚本--> <style type="text/css"> .draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; } .ui-widget-header p, .ui-widget-content p { margin: 0; } #snaptarget { height: 140px; } </style> </head> <body> <div id="snaptarget" class="ui-widget-header"> <p>我是一个扑捉(快照)标签</p> </div> <br style="clear:both"> <div id="draggable" class="draggable ui-widget-content"> <p>默认 (snap: true),捕捉所有其他可拖动的元素.</p> </div> <div id="draggable2" class="draggable ui-widget-content"> <p>我只扑捉 the big box.</p> </div> <div id="draggable3" class="draggable ui-widget-content"> <p>我只捕捉 the big box 的外边.</p> </div> <div id="draggable4" class="draggable ui-widget-content"> <p>我捕捉一个20×20 的网格.</p> </div> <div id="draggable5" class="draggable ui-widget-content"> <p>我捕捉一个 80 x 80 的网格.</p> </div> </body> 效果就是拖拽的元素在靠近符合条的元素的时候会自动磁性靠近 10、视觉反馈: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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({helper:"original"}); //拖拽复制体 $("#draggable2").draggable({opacity:0.7,helper:"clone"}); // $("#draggable3").draggable({ cursor:"move", cursorAt:{top:-12,left:-20}, helper:function(event){ return $("<div class='ui-widget-header'>我是一个自定义helper</div>"); } }); // $("#set div").draggable({stack:"#set div"}); }); </script> <!--自写脚本--> <style type="text/css"> #draggable, #draggable2, #draggable3, #set div { width: 150px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; } #draggable, #draggable2, #draggable3 { margin-bottom:20px; } #set { clear:both; float:left; width: 368px; height: 120px; } p { clear:both; margin:0; padding:1em 0; } </style> </head> <body> <h3 class="docs">With helpers:</h3> <div id="draggable" class="ui-widget-content"> <p>Original</p> </div> <div id="draggable2" class="ui-widget-content"> <p>半透明克隆</p> </div> <div id="draggable3" class="ui-widget-content"> <p>自定义 helper (与 cursorAt 组合)</p> </div> <h3 class="docs">Stacked:</h3> <div id="set"> <div class="ui-widget-content"> <p>We are draggables..</p> </div> <div class="ui-widget-content"> <p>..whose z-indexes are controlled automatically..</p> </div> <div class="ui-widget-content"> <p>..with the stack option.</p> </div> </div> </body> 效果是给人一种视觉上的信息反馈 11、拖拽排序: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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) { // $("#sortable").sortable({ revert:true}); //拖拽函数 $('#draggable').draggable({ connectToSortable:"#sortable", helper:"clone", revert:"invalid" }); $("ul,li").disableSelection(); }); </script> <!--自写脚本--> <style type="text/css"> ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } li { margin: 5px; padding: 5px; width: 150px; } </style> </head> <body> <ul> <li id="draggable" class="ui-state-highlight">拖拽我下来</li> </ul> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> </body> 效果是可以拖拽这元素进行排序 此文章转载自http://www.cnblogs.com/ganqiyin/archive/2013/12/12/3471622.html