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

  • 相关阅读:
    shell脚本编写实例
    正则表达式文本过滤
    bootstrap实现嵌套列
    当鼠标悬停在链接上,或者点击过的链接,颜色会被设置为 #2a6496。同时,会呈现一条下划线。点击过的链接,会呈现一个颜色码为 #333 的细的虚线轮廓。另一条规则是设置轮廓为 5 像素宽,且对于基于 webkit 浏览器有一个 -webkit-focus-ring-color 的浏览器扩展。轮廓偏移设置为 -2 像素
    bootstrap页面效果图
    bootstrap实现菜单定位
    bootstrap三列布局
    bootstrap图片切换效果
    bootstrap导航菜单
    首字下沉
  • 原文地址:https://www.cnblogs.com/jq520/p/2152100.html
Copyright © 2011-2022 走看看