jQuery UI draggable 拖动参数集合参考

使用jQuery UI这个js库可以很好的实现网页中元素的拖放效果，要想做出理想的拖放功能，了解它的参数设置即可，参数也很简单易懂。

下面的参数集合来自网上的文章，摘录过来以便使用。
官方介绍文档。

Default

$(”#draggable”).draggable();

constrain-movement(限制范围移动)

$(”#draggable”).draggable({ axis: ‘y' }); //限制y轴
$(”#draggable2″).draggable({ axis: ‘x' }); //限制x轴
$(”#draggable3″).draggable({ containment: ‘#containment-wrapper', scroll: false }); //不出现滚动条
$(”#draggable4″).draggable({ containment: ‘#demo-frame' });
$(”#draggable5″).draggable({ containment: ‘parent' }); //限制在父系框架中
/* 关于grid，有人把它和吸附移动放在一起，但我认为它的效果类似axis + distance，感觉是将元素限制在网格中移动 */
$("#draggable6").draggable({grid: [80, 80]}); //每次元素在x轴或者y轴移动80px
$("#draggable7").draggable({grid: [0, 80]}); //元素在x轴移动0，y轴上移动80px，效果类似于：
$("#draggable7").draggable({axis: 'y', distance: 80});

delay-start(延时移动)

$(”#draggable”).draggable({ distance: 20 }); //移动20像素开始拖动
$(”#draggable2″).draggable({ delay: 1000 });//延迟1秒后开始拖动

snap (吸附移动)

靠近目标时会自动被靠过去
$(”#draggable”).draggable({ snap: true }); //默认，任意方式吸附
$("#draggable").draggable({snapMode: both}); // 默认，内外径吸附，可选值：both, inner, outer
$(”#draggable2″).draggable({ snap: ‘.ui-widget-header' }); //以某元素的内外径吸附
$(”#draggable3″).draggable({ snap: ‘.ui-widget-header', snapMode: ‘outer' }); //以某元素外径吸附

revert(复位)

$(”#draggable”).draggable({ revert: true }); //revert:true 如果没有放进一个新位置则恢复到上一次的位置 

visual effect(视觉效果)

$(”#draggable”).draggable({ helper: 'clone' }); //拖动一个复制出来的元素，默认值original，没有克隆元素，还可以接受函数function
$("#draggable").draggable({
    helper: function()
    {
        console.log('aaa');
    }
});
$(”#draggable″).draggable({ opacity: 0.5}); //设置拖动时元素的透明度
$(#draggable).draggable(
{
    helper: 'clone', //拖动复制元素
    cursor: 'move', //拖动时鼠标指针样式
    cursorAt: { top: -100, left: -20 } //设定鼠标指针和helper之间的相对位置关系
});