jquery UI 跟随学习笔记——拖拽（Draggable）

最新推荐文章于 2023-07-30 10:00:32 发布
最新推荐文章于 2023-07-30 10:00:32 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： jquery 文章标签： jquery jquery ui

jquery UI 跟随学习笔记——拖拽（Draggable）

引言

     这周暂时没有任务下达，所以老大给我的任务就是熟悉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是设置滚动条跟随速度的效果

复制代码 
 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    //在页面加载完之后加载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 <!--导入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    //在页面加载完之后加载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 <!--导入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    //在页面加载完之后加载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 <!--导入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    //在页面加载完之后加载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 <!--导入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    //在页面加载完之后加载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">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    //在页面加载完之后加载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>你能四处拖拽我&hellip;</p>
36 <p class="ui-widget-header">&hellip;但是，用这个手柄你不能拖拽我.</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    //在页面加载完之后加载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 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    //在页面加载完之后加载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 <!--导入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    //在页面加载完之后加载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 $("<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    //在页面加载完之后加载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 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>
复制代码

 

 

结束语 

    因为我不知道怎么把自己做的效果直接在博文中显示出来也就是效果和jQueryUI官方一样，所以只有把 代码贴出来了，代码中带有我自己写的一些体会，如果问题请指正，谢谢！！^_^

漫漫人生，唯有激流勇进，不畏艰险，奋力拼搏，方能中流击水，抵达光明的彼岸

「已注销」
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【jQuery】拖曳插件——draggable
O(∩_∩)O
12-22 4748
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖
【JQuery UI】拖曳插件——draggable
O(∩_∩)O
04-07 1471
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖
jquery-ui-1.10.2.custom
04-08
最新的jqueryui jquery-ui-1.10.2.custom 包含jquery 1.9.1
jQuery UI 实例 - 拖动（Draggable）
unber的博客
04-07 2070
允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档。
jquery-draggable总结
weixin_42979149的博客
10-16 7222
约束拖动范围 通过定义 draggable 区域的边界来约束每个 draggable 的运动。 设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴 $( "#draggable" ).draggable({ axis: "y" }); $( "#draggable1" ).draggable({ axis: "x" }); 使用 containment 选项来指定...
JQuery UI - draggable参数中文详细说明
热门推荐
liu_111111的专栏
05-09 3万+
·概述    在任何DOM元素启用拖动功能。通过单击鼠标并拖动对象在窗口内的任何地方移动。    官方示例地址：http://jqueryui.com/demos/draggable/      所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象    ui.helper - 表示被拖拽的元素的JQuery对象    ui.position
jQuery UI-Draggable 参数集合
10-29
jQuery UI-Draggable常用参数集合。
jqueryUI-multiimage-draggable:jQuery UI 多图可拖动示例
07-06
jqueryUI-multiimage-draggable 这个脚本结合了 Javascript、jQuery 和 jQuery UI 的许多不同方面： Sortable：ui 助手、数组操作、类操作 Droppable：可接受的项目、类操作、动画 我一直在广泛研究图像管理应用...
jquery.ui.draggable中文文档
10-29
暂时都使用xml格式, 方便传播, 制作电子书.
jquery.ui.draggable中文文档(原文翻译)
10-26
jquery.ui.draggable中文文档(原文翻译)。需要的朋友可以过来参考下，希望对大家有所帮助
jquery.ui.draggable.js
11-26
JQuery的插件，实现拖拽效果所需要的插件，jquery.ui.draggable.js
jquery UI拖拽插件Draggable的使用
大头之家
07-05 2894
正文：Draggable(拖拽)      1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable(); title>jqeruy UI 拖拽练习--默认配置title> 导入jquery插件--> script type="text/javascript" src="../../js/jquery-1.10.2.min.js">script
无涯教程-jQuery - Dragable拖动函数
无涯教程
07-30 186
Drag-able 函数可与JqueryUI中的交互一起使用。此函数可在任何DOM元素上启用可拖动功能。无涯教程可以通过使用鼠标单击来拖动可拖动元素。
JQuery UI的拖拽功能
weixin_33739646的博客
03-13 423
JQuery UI是JQuery官方支持的WebUI 代码库，包含底层交互、动画、特效等API，并且封装了一些Web小部件（Widget）。同时，JQuery UI继承了jquery的插件支持，有大量的第三方插件可以丰富JQuery UI的功能。JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppabl...
jquery UI 实例——拖拽（Draggable）
QQ873963142的博客
03-11 4169
默认功能 在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。 lang="en"> charset="utf-8"> jQuery UI 拖动（Draggable） - 默认功能 rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoo
jquery.custom自动补全插件
JiangJunDriver的博客
06-16 3171
一、引入所需的js插件<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.0.custom.js"></script>二、html部分<input id="conSearch" type="search"
jquery UI draggable 带复制拖拽
weixin_30341745的博客
09-30 857
// 做学习参考的话，重点看3就可以了， 前面的1跟2 都有些问题， 这是很早之前写的了，由于时间原因顾不上细细修改了， // 具体 就是修改 $('.ui-draggable-dragging').html（） 结构， 使得拖动过程中的样式美观， //('.this_a') 是要去拖目标对象的身份识别ID，('.this_b') 是对应得具体内容， 后面在去重判断时会用到。// 详细的 ...
jquery draggable
最新发布
08-19
jQuery Draggable是一个jQuery插件，它允许你通过鼠标拖动元素。它提供了一组方法和事件，使你可以在网页上创建可拖动的元素。 使用jQuery Draggable非常简单。首先，你需要引入jQuery库和jQuery Draggable插件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值