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的下边框吸附。