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

时间：2022-12-06 15:53:52
引言

     这周暂时没有任务下达，所以老大给我的任务就是熟悉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


 

 

标签：

相关文章