zoukankan      html  css  js  c++  java
  • jQuery UIdraggable参数介绍(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;
        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的下边框吸附。

  • 相关阅读:
    如何获取url访问历史记录
    js跨域总结
    setAttribute的兼容性
    js中原生对象、内置对象和宿主对象(转)
    一道变态的js题
    如何判断js是否加载完全
    深入理解viewport(转)
    webapp之路--理解viewport的使用
    zepto学习之路--源代码提取
    js正则之零宽断言
  • 原文地址:https://www.cnblogs.com/jq520/p/2152100.html
Copyright © 2011-2022 走看看