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();