jquery插件之拖放

2017-03-23 by Evan

这几天接到一个项目要用到拖拽排序,如果你去网上搜索的话,应该会搜到Sortable.js,这个是脱离jquery使用,比较轻量,而项目里面已经集合了jquery,所以这次依旧使用jquery的插件draggable,droppable, sortable。 Sortable插件请点击跳转到它的官网进行下载 jquery插件请点击跳转到它的官网进行下载,可以全部下载,也可以根据自己需要进行下载

Sortable插件请点击跳转到它的官网进行下载

jquery插件请点击跳转到它的官网进行下载,可以全部下载,也可以根据自己需要进行下载


draggable:拖拽

别的不说,先上它相关的中文文档

英文学霸请到它的官方英文文档查看

  1. 首先,我们要先引入相关的js,先引入jquery库,再引入jquery-ui
    1
    2
    
    <script src="自己项目插件地址/jquery-1.9.1.js"></script>
    <script src="自己项目插件地址/jquery-ui.js"></script>//插件都集成在jquery-ui.js
  2. 然后需要在HTML页面上有一个拖拽的目标
    1
    
    <div id="draggable" class="draggable"></div>
  3. 插件进行初始化使用
    1
    2
    3
    
    $("#draggable").draggable({//初始化#draggable,初始化之后就可以被拖动
          //这里是配置项设置
    });
  4. 配置项解释(只是列举常用部分,具体请看文档)
    (1)addClasses
    如果值设置为false, ui-draggable样式类将不能被添加引用。true表示ui-draggable样式被添加到该元素.false表示ui-draggable样式不被添加到该元素.
    代码样例:$('#draggable').draggable({ addClasses: false });
    (2)appendTo
    默认值为parent
    具体指当进行拖动时,拖动组件助手应该被添加到的元素,即是用来指定控件在拖动过程中ui.helper的容器
    代码样例:$('#draggable').draggable({ appendTo:'body'});
    (3)axis
    默认值为false, 不限制拖动的方向,还可以取x,y
    具体指约束拖动过程中的取向.
    代码样例:$('#draggable').draggable({ axis:'x'});
    (4)handle
    默认值为false
    指定触发拖动的元素.只有在特定的元素上触发鼠标按下事件时,才可以拖动
    代码样例:$( "#draggable" ).draggable({ handle: "h2" });
    (5)cursor
    默认值为auto
    指定鼠标的样式
    代码样例:$( "#draggable" ).draggable({ cursor:'crosshair'});
    (6)helper
    默认值为original,指可拖动控件本身移动
    当为clone,字面意思,将可拖动控件自身克隆一个移动, 自身在原始位置不变
    当是函数的时候就需要注意了,必须返回一个DOM元素
    代码样例:$( "#draggable" ).draggable({ helper:'clone'});
    $( "#draggable" ).draggable({ helper:function(event){ return $(".dom")}});

droppable:放

照例中文文档

照例官方英文文档

  1. 在HTML页面上有一个放置的区域
    1
    
    <div id="droppable" class="droppable"></div>
  2. 插件进行初始化使用
    1
    2
    3
    
    $("#droppable").droppable({//初始化#droppable,初始化之后就可以放置
        //这里是配置项设置
    });
  3. 事件类型
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    $('#droppable').droppable({  
           //在允许的draggable对象开始拖动时触发.
           activate: function(event, ui) { ... },
           //在允许的draggable对象停止拖动时触发.
           deactivate: function(event, ui) { ... },
           //在允许的draggable对象”经过”这个droppable对象时触发
           over: function(event, ui) { ... },
           //在允许的draggable对象离开 这个droppable对象时触发
           out: function(event, ui) { ... },
           //在允许的draggable对象填充进这个droppable对象时触发.
           drop: function(event, ui) { ... }  
    });
  4. 配置项解释(只是列举常用部分,具体请看文档)
    (1)accept
    控制可拖动的元素被拖放接受。
    如是是一个函数,函数将被调用页面上的每一个可拖动的(传递给函数的第一个参数)。该函数必须返回true,如果可拖动应该接受。
    代码样例:$("#droppable").droppable({ accept: ".special" });
    (2)activeClass
    如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式。
    代码样例:$('#droppable').droppable({ activeClass: "ui-state-highlight" });
    (3)addClasses
    如果设置为false, 可以防止ui-droppable类在进行时添加. 这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.
    具体指约束拖动过程中的取向.
    代码样例:$('#droppable').droppable({ addClasses: false });
    (4)disabled
    如果设置为 true将禁止拖放
    代码样例:$( "#droppable" ).droppable({ disabled: true });
    (5)hoverClass
    如果设置了该参数,将在一个被允许的拖动元素悬停在放置(droppable)对象上时,向放置(droppable)对象添加一个指定的样式.
    代码样例:$( "#droppable" ).droppable({ hoverClass: "drop-hover" });

本文编写参考于jquery ui(二)draggable,droppable