jQueryUI-draggable参数学习总结

编写html代码，看了下draggable参数的各种效果。包括以下参数：

1。jQuery("#draggable").draggable();

2。jQuery("#draggable1").draggable({cursorAt:{cursor:"move",top:56,left:56}});
 jQuery("#draggable2").draggable({cursorAt:{cursor:"crosshair",top:-5,left:-5}});
 jQuery("#draggable3").draggable({cursorAt:{bottom:0}});

     解释：cursorAt：弄不太明白

3。jQuery("#draggable4").draggable({containment:"#containment-fieldset",scroll:false});

    解释：仅可以在id为containment-fieldset的容器内拖拽，即containment参数限制在某个限定的区域内实现拖拽

4。jQuery("#draggable5").draggable({axis:"y"});
 jQuery("#draggable6").draggable({axis:"x"});

    解释：限制仅X,Y轴上可拖拽，axis:"y"：限制仅可在Y轴上可拖拽，axis:"x"：限制仅可在X轴上可拖拽。

5。jQuery("#draggable7").draggable({distance:20});
   jQuery("#draggable8").draggable({delay:1000});

    解释：延时移动。distance:20:移动20个像素开始拖动。delay:1000:延迟1秒开始拖动

6。jQuery("#draggable9").draggable({revert:true});
   jQuery("#draggable10").draggable({revert:true,helper:"clone"});

     解释：恢复到原始位置。revert:true设置为恢复到原始位置，revert:true,helper:"clone"同上功能加helper:'clone' 复制拖动

7。jQuery("#draggable11").draggable({handle:"p"});
 jQuery("#draggable12").draggable({cancel:"p.ui-widget-header"});

    解释：拖动点设置。handle设置实现拖动位置，cancel设置限制拖动位置

（全部html代码复制，添加上jQuery draggable的库文件即可直接运行，看效果。）

 
  
  <script type = "text/javas《script》
  <script type = "text/javas《script》
  <script type = "text/javas《script》
  <script type = "text/javas《script》
  <script type = "text/javas《script》
  
  <script type ="text/javas
   jQuery(document).ready(function(){
    jQuery("#draggable").draggable();
    jQuery("#draggable1").draggable({cursorAt:{cursor:"move",top:56,left:56}});
    jQuery("#draggable2").draggable({cursorAt:{cursor:"crosshair",top:-5,left:-5}});
    jQuery("#draggable3").draggable({cursorAt:{bottom:0}});
    //在某个限定的区域内可拖拽
    jQuery("#draggable4").draggable({containment:"#containment-fieldset",scroll:false});
    //限制仅X,Y轴上可拖拽
    jQuery("#draggable5").draggable({axis:"y"});
    jQuery("#draggable6").draggable({axis:"x"});
    //拖拽延时distance:20:移动20个像素开始拖动。delay:1000:延迟1秒开始拖动
    jQuery("#draggable7").draggable({distance:20});
    jQuery("#draggable8").draggable({delay:1000});
    //可恢复到原位的拖拽
    jQuery("#draggable9").draggable({revert:true});
    jQuery("#draggable10").draggable({revert:true,helper:"clone"});
    //div内点击某范围可拖拽，点击其它范围不可拖拽。
    jQuery("#draggable11").draggable({handle:"p"});
    jQuery("#draggable12").draggable({cancel:"p.ui-widget-header"});
   });
  《script》
  
 
 
  

PS：上述代码中，蓝色部分是运行此代码必须导入的JS和CSS文件。