jQuery UI-draggable参数介绍（2）

snap-to(吸附移动)：

jQuery("#draggable1").draggable({snap:true});//默认，任何方式吸附
jQuery("#draggable2").draggable({snap:"#snaptarget"});//以某元素的内外径吸附
jQuery("#draggable3").draggable({snap:"#snaptarget",snapMode:"outer"});//以某元素外径吸附，吸附方式：本上吸其下，本下吸其上
jQuery("#draggable4").draggable({grid:[20,20]});//以一定的距离移动
jQuery("#draggable5").draggable({grid:[80,80]});

源代码-html代码：

<html>
 <head>
  <link rel = "stylesheet" href = "jquery.ui.all.css">
  <script type = "text/javascript" src = "jquery-1.4.2.min.js"></script>
  <script type = "text/javascript" src = "jquery.ui.core.js"></script>
  <script type = "text/javascript" src = "jquery.ui.widget.js"></script>
  <script type = "text/javascript" src = "jquery.ui.mouse.js"></script>
  <script type = "text/javascript" src = "jquery.ui.draggable.js"></script>
  <link rel = "stylesheet" href = "demos.css">
  <script type = "text/javascript">
   jQuery(document).ready(function(){
    jQuery("#draggable1").draggable({snap:true});//默认，任何方式吸附
    jQuery("#draggable2").draggable({snap:"#snaptarget"});//以某元素的内外径吸附
    jQuery("#draggable3").draggable({snap:"#snaptarget",snapMode:"outer"});//以某元素外径吸附，吸附方式：本上吸其下，本下吸其上

    jQuery("#draggable4").draggable({grid:[20,20]});//以一定的距离移动
    jQuery("#draggable5").draggable({grid:[80,80]});
   });
  </script>
  <style>
   #snaptarget{
    height:150px;
   }
   .ui-widget-header p{
    margin:0;
   }
   #draggable1,#draggable2,#draggable3,#draggable4,#draggable5{
    height:80px;
    width:90px;
    padding:0.5em;
    float:left;
    margin:0px 10px 10px 0px;
   }
  </style>
 </head>
 <body>
  <div class = "demo">
   <div id = "snaptarget" class = "ui-widget-header">
    <p>a snap target</p>
   </div>
   <br clear = "both"/>
   <div id = "draggable1" class = "ui-widget-content">
    <p>默认吸附方式</p>
   </div>
   <div id = "draggable2" class = "ui-widget-content">
    <p>以某元素的内外径吸附</p>
   </div>
   <div id = "draggable3" class = "ui-widget-content">
    <p>以某元素外径吸附</p>
   </div>
   <div id = "draggable4" class = "ui-widget-content">
    <p>以一定的距离移动：grid:[20,20]</p>
   </div>
   <div id = "draggable5" class = "ui-widget-content">
    <p>以一定的距离移动：grid:[80,80]</p>
   </div>
  </div>
 </body>
</html>

PS：对jQuery("#draggable3").draggable({snap:"#snaptarget",snapMode:"outer"});//以某元素外径吸附，吸附方式：本上吸其下，本下吸其上的理解：id 为“draggable3”的可拖拽容器以id为“snaptarget”的容器的外径吸附。即draggable3在snaptarget上 时，draggable3的下边框与snaptarget的上边框吸附，当draggable3在snaptarget下时，draggable3的上边 框与snaptarget的下边框吸附。

posted @ 2011-08-24 15:44  红油小生  Views(536)  Comments(0)    收藏  举报