jQueryUI 小结

一直绝的jQuery是一个很不错的插件，方便使用开发，今天再谈一下jQueryUI的使用.

结合runoob.com实例，自己总结.

拖拽

将元素设置为如下的样式.

<div id="parentID">
    <div id="my-id">
        <p>请拖动我！</p>
    </div>
</div>

<script>
  $(function() {
    $( "#draggable" ).draggable();
  });
</script>

其他的设置：
当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。

<script>
  $(function() {
    $( "#draggable" ).draggable(
        {
            scroll:true,
            scrollSpeed:100,
            scrollSensitivity:100
        });
  });
</script>

通过定义 draggable 区域的边界来约束每个 draggable 的运动。设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴，或者使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器，比如 ‘document.’。

<script>
  $(function() {
    $( "#draggable" ).draggable(
        {
            axis:"y",
            containment:"parent"//直接指定父类，非选择器
        });
  });
</script>

延迟相关
delay:毫秒数 当开始拖拽时延迟相应的秒数
distance:像素点 当开始拖拽时，达到相应的像素开始拖拽

  $(function() {
    $( "#draggable" ).draggable(
        {
            delay:1000
            distance:20
        });
  });

除此之外我还可以对相应的拖拽事件进行监听
start拖拽开始时回调
darg拖拽中的回调
stop拖拽结束的回调

$('#dargable'){
    sart:function(){
    },
    drag:function(){
    },
    stop:function(){
    }
}

注意
在拖拽的时候我们可以，取消一些元素的选中用到，这个函数.

$( "div, p" ).disableSelection();

handle属性(字符串选择器)，darggable上拖拽handle指定部分时才允许拖拽.
cancel属性，darggable(字符串选择器)上拖拽cancel指定部分时不起作用.

$( "#draggable" ).draggable({ handle: "p" });
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });

revert参数(布尔值)
停止拖拽时是否返回到原始位置

$( "#draggable" ).draggable({ revert: true });

重要
对齐方式是很常用的属性需要注意，我们如果将元素放入另一个元素内，并且需要对齐的话我们就需要设置这个属性.
snap:true 对齐到所有其他的draggable元素
snap:”对齐元素的字符选择器”
snapMode:inner(表示对齐元素的内边) outer(表示对齐元素的外边)
both(对齐元素的内外边)

snap与snap配对使用更佳

$( "#draggable" ).draggable({ snap: true });
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });

视觉反馈效果

给用户提供反馈，就像以助手方式拖拽对象一样。helper 选项接受值 ‘original’（用光标移动 draggable 对象），’clone’（用光标移动 draggable 的副本），或者一个返回 DOM 元素的函数（该元素在拖拽期间显示在光标附近）。通过 opacity 选项控制助手的透明度。

一般helper选项用的比较多

为了区别哪一个 draggable 正在被拖拽，让在运动中的 draggable 保持最前。如果正在拖拽，使用 zIndex 选项来设置助手的高度 z-index，或者使用 stack 选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。

代码不在这里重复

放置

droppable表示该元素可以存放拖拽(draggable元素)，只要有相应的元素放入到droppable元素中drop回调函数就会被调用.

accpet 指定接收到元素，如果设定了，其他元素被拖拽，drop回调函数不会调用.相应的activeClass与hoverClass也不会改变.

activeClass：当拖拽元素放置到droppable元素当中(没有松开鼠标)，这是droppable元素会变为这类的样式

hoverClass:当有draggable元素被拖拽时，这个类的样式会被调用.

greedy:(布尔值)当父元素与子元素都为droppable，设置为true防止父元素的drop函数被调用

$("#droppable").droppable({
    drop:function(){

    },
    accept:"#draggable",
    activeClass:"",
    hoverClass:""
})

缩放

animate:(布尔值) 是否开启动画
containment:元素选择器，限制缩放的区域
delay:毫秒数 延迟相应的毫秒数执行缩放
distance: 延迟相应的像素值延迟相应的缩放
helper: CSS lass 当做缩放时只显示元素的轮廓
minWidth,minHeight,maxHeight,maxWidth指定缩放元素最大最小的宽度、高度.
aspectRatio:纵横比
grid:像素值，指定元素在缩放的时候纵横最大最小增50px
alsoResize:元素选择器 当缩放元素缩放时，该属性所对应的元素也会被缩放(当然该元素也应是缩放元素)
ghost:布尔值 当元素被缩放时，会产生透明的效果

$( "#resizable" ).resizable({
        animate:true，
        containment:"#container",
        delay:1000,
        distance:40,
        minWidth:100,
        maxWidth:200,
        minHeight:200,
        maxHeight:300,
        aspectRatio:16/9,
        grid:50,
        ghost:true
    });

选择

stop:回调函数 选择事件完成的回调

$( "#selectable" ).selectable({
        stop:function(){

        }
    });

排序

使用sortable时，需要将对应元素的选取取消掉

$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();