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(481)  Comments(0Edit  收藏  举报