现在的位置: 首页 > 综合 > 正文

[转载]jquery ui(二)draggable,droppable 学习总结

2018年06月08日 ⁄ 综合 ⁄ 共 2201字 ⁄ 字号 评论关闭

刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能。

一、drappable

   1、回调函数  

       有start, stop, drag等事件,这些函数都接受两个参数:event和ui。

          event: 浏览器原生的事件 ; ui: 一个JQuery的ui对象。

       其中ui 有以下属性:

         a) ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
         b) ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
         c) ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域.   html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)

      (1) start: 拖动开始, 指鼠标按下, 开始移动.
      (2) drag: 拖动过程中鼠标移动.
      (3) stop: 拖动结束.
        [代码示例]
          初始化时设置事件.
          $('.selector').draggable({
             start: function(event, ui){ alert(this); },
             drag: function(event, ui) { alert(this); },
             stop: function(event, ui) { alert(this); }
          });

   2、常用参数(选项)

   (1)addClasses: [类型]Boolean(布尔值) [默认值]true
    [产生影响]
    用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
    true表示ui-draggable样式被添加到该元素.
    false表示ui-draggable样式不被添加到该元素.
    [代码示例]draggable其他选项的初始化,   
      $('.selector').draggable({ addClasses: false });
      将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式
  
    (2)appendTo: [类型]Element, Selector(HTML元素对象或选择器) [默认值]'parent' 父元素
      [产生影响]
      用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.
      [代码示例]
       $('.selector').draggable({ appendTo: 'body' });
  
     (3)axis: 
       [类型]String, Boolean(可取的值有'x', 'y', false)
         'x': 只能水平拖动
         'y': 只能垂直拖动
         false: 既可以水平, 也可以垂直拖动.
       [默认值]false, 不限制拖动的方向
       [产生影响]
            约束拖动过程中的取向.
       [代码示例]
          $('.selector').draggable({ axis: 'x' });
  
     (4)containment: 
        [类型]选择器, 元素, 字符串, 数组.
           选择器: 只能在选择器约束的元素内拖动
           元素: 只能在给定的元素内拖动
           字符串: 
              parent: 只能在父容器内拖动
              document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
              widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
          数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
          false: 不限制拖动的活动范围
        [默认值]false
   

抱歉!评论已关闭.