jquery UI 跟随学习笔记——拖拽（Draggable）
jquery UI 跟随学习笔记——拖拽（Draggable）
引言
这周暂时没有任务下达，所以老大给我的任务就是熟悉jquery相关插件，我就先选择了jquery UI 插件，以及jquery库学习。
我用了两天的时候熟悉Interactions模块中的Draggable功能，并跟随练习，写这篇博文就是想记录下自己的心得体会。
正文： Draggable(拖拽)
1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable();
<title>jqeruy UI 拖拽练习--默认配置title> <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> <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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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,#draggable2 23 { 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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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,#draggable2 23 { 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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 //启动开始，总数+1 23 counts[0]++; 24 //修改状态 25 updateCounterStatus($start_counter,counts[0]); 26 } , 27 drag:function(){ 28 //拖拽，总数+1 29 counts[1]++; 30 //修改状态 31 updateCounterStatus($drag_counter,counts[1]); 32 }, 33 stop:function(){ 34 //结束开始，总数+1 35 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">0span>xli> 69 <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4">span>"拖拽" 调用 <span class="count">0span>xli> 70 <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop">span>"结束" 调用 <span class="count">0span>xli> 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 拖拽练习--Handlestitle> 4 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 helperp> 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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 $(""); 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>Originalp> 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 5 <script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script> 6 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 //在页面加载完之后加载jquery 13 $().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 1li> 39 <li class="ui-state-default">Item 2li> 40 <li class="ui-state-default">Item 3li> 41 <li class="ui-state-default">Item 4li> 42 <li class="ui-state-default">Item 5li> 43 ul> 44 45 body>
结束语
因为我不知道怎么把自己做的效果直接在博文中显示出来也就是效果和jQueryUI官方一样，所以只有把 代码贴出来了，代码中带有我自己写的一些体会，如果问题请指正，谢谢！！^_^
漫漫人生，唯有激流勇进，不畏艰险，奋力拼搏，方能中流击水，抵达光明的彼岸