溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery ui（六）拖動(dòng)排序 sortable

發(fā)布時(shí)間：2020-07-19 10:45:29 來(lái)源：網(wǎng)絡(luò) 閱讀：5597 作者：dearkerwin 欄目：web開(kāi)發(fā)

jquery ui 的另一個(gè)強(qiáng)大的功能就是拖動(dòng)排序，也就是通過(guò)鼠標(biāo)的拖到，實(shí)現(xiàn)對(duì)一些元素的排序。
廢話少說(shuō)，用實(shí)例說(shuō)話。

一、簡(jiǎn)單的實(shí)例

下面是對(duì)一組li元素進(jìn)行排序的實(shí)例

1、代碼

<style>
//為了展示的效果更好，增加了一些css樣式
.sortable { list-style-type: none; margin:0; padding:0; width:60%;}
.sortable li { margin:0 3px 3px 3px; padding: 0.4em;
          padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: move ;}
.sortable li span { position: absolute; margin-left:-1.3em;}
.ui-state-highlight { height: 1.5em; line-height: 1.2em;}
</style>

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

<ul class="sortable">
<li class="ui-state-default">Item 1--ifxoxo.com</li>
<li class="ui-state-default">Item 2--ifxoxo.com</li>
<li class="ui-state-default">Item 3--ifxoxo.com</li>
</ul>

2、截圖

（1）拖拽排序之前
jquery ui（六）拖動(dòng)排序 sortable

jquery-ui-sortable 拖拽之前截圖 — ifxoxo.com

（2）拖拽排序的過(guò)程
jquery ui（六）拖動(dòng)排序 sortable

jquery-ui-sortable 拖拽過(guò)程截圖 — ifxoxo.com

（3）拖拽排序之后
jquery ui（六）拖動(dòng)排序 sortable

jquery-ui-sortable 拖拽排序之后 — ifxoxo.com

二、具體實(shí)現(xiàn)

1、需要加載文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
     rel="stylesheet"/>

2、頁(yè)面上的HTML代碼

需要一個(gè)< div >或者< ul >等元素， 它的直接子節(jié)點(diǎn)將可以被拖拽排序

<ul id="sortable">
<li class="ui-state-default">Item 1--ifxoxo.com</li>
<li class="ui-state-default">Item 2--ifxoxo.com</li>
<li class="ui-state-default">Item 3--ifxoxo.com</li>
</ul>
//或者
<div id="sortable">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>

3、js代碼

最簡(jiǎn)單的初始化函數(shù)：

$(.selecter).sortable()

（它支持很多參數(shù)，詳見(jiàn)4）

4、sortable的參數(shù)

（為了更好的解釋一些參數(shù)，有一個(gè)復(fù)雜的示例，詳見(jiàn)6）

參數(shù) 默認(rèn)值 作用
axis false 如果有設(shè)置，則元素僅能橫向或縱向拖動(dòng)?？蛇x值：’x', ‘y’
cancel input,textarea,
button,select,option		 阻止排序動(dòng)作在匹配的元素上發(fā)生
connectWithfalse允許sortable對(duì)象連接另一個(gè)sortable對(duì)象，可將item元素拖拽到另一個(gè)中.(類(lèi)型：Selector)
containmentfalse約束排序動(dòng)作只能在一個(gè)指定的范圍內(nèi)發(fā)生?？蛇x值：DOM對(duì)象, ‘parent’, ‘document’, ‘window’, 或jQuery對(duì)象
cursorauto定義在開(kāi)始排序動(dòng)作時(shí)，鼠標(biāo)的樣式。
如 cursor: “move”
cursorAtfalse當(dāng)開(kāi)始移動(dòng)時(shí)，元素的偏移的位置（最多兩個(gè)方向）?？蛇x值：{ top, left, right, bottom }。
如 cursorAt: {left:5,bottom:5}
delay0以毫秒為單位，設(shè)置延遲多久才激活排序動(dòng)作。此參數(shù)可防止誤點(diǎn)擊。
如 delay: 500
distance1決定至少要在元素上面拖動(dòng)多少像素后，才正式觸發(fā)排序動(dòng)作。
如 distance: 30
dropOnEmptyfalse是否允許拖拽到一個(gè)空的sortable對(duì)象中。
gridfalse每次移動(dòng)都按一個(gè)格子大小移動(dòng)，數(shù)組值：[x,y]
如 grid: [50, 20]
handlefalse限制排序的動(dòng)作只能在item元素中的某種元素
如 handle: ‘h3′
helperoriginal設(shè)置是否在拖拽元素時(shí)，顯示一個(gè)輔助的元素?？蛇x值：‘original’, ‘clone’。
如 helper: ‘clone’
items“> *” (第一級(jí)子元素)指定在排序?qū)ο笾?，哪些元素是可以進(jìn)行拖拽排序的。
如 items: “> li”
opacityfalse輔助元素(helper)顯示的透明度
如 opacity: 0.6
placeholderfalse設(shè)置當(dāng)排序動(dòng)作發(fā)生時(shí)，空白占位符的CSS樣式
如 placeholder: ‘css-class-name’ （指定一個(gè)css的class）
revertfalse如果設(shè)置成true，則被拖拽的元素在返回新位置時(shí)，會(huì)有一個(gè)動(dòng)畫(huà)效果
scrollfalse如果設(shè)置成true，則元素被拖動(dòng)到頁(yè)面邊緣時(shí)，會(huì)自動(dòng)滾動(dòng)。
scrollSensitivity20設(shè)置當(dāng)元素移動(dòng)至邊緣多少像素時(shí)，便開(kāi)始滾動(dòng)頁(yè)面
scrollSpeed20設(shè)置頁(yè)面滾動(dòng)的速度
toleranceintersect設(shè)置當(dāng)拖動(dòng)元素越過(guò)其它元素多少時(shí)便對(duì)元素進(jìn)行重新排序?？蛇x值：’intersect’, ‘pointer’
intersect：至少重疊50%
pointer：鼠標(biāo)指針重疊元素
zIndex1000設(shè)置在排序動(dòng)作發(fā)生時(shí)，元素的z-index值

5、事件和方法

（為了更好的解釋一些事件和方法，有一個(gè)復(fù)雜的示例，詳見(jiàn)6）

（1）事件

start
當(dāng)排序動(dòng)作開(kāi)始時(shí)觸發(fā)此事件。
定義：$(‘.selector’).sortable({ start: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });

sort
當(dāng)元素發(fā)生排序時(shí)觸發(fā)此事件。
定義：$(‘.selector’).sortable({ sort: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sort’, function(event, ui) { … });

change
當(dāng)元素發(fā)生排序且坐標(biāo)已發(fā)生改變時(shí)觸發(fā)此事件。
定義：$(‘.selector’).sortable({ change: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });

beforeStop
當(dāng)排序動(dòng)作結(jié)束之前觸發(fā)此事件。此時(shí)占位符元素和輔助元素仍有效。
定義：$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });

stop
當(dāng)排序動(dòng)作結(jié)束時(shí)觸發(fā)此事件。
定義：$(‘.selector’).sortable({ stop: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });

update
當(dāng)排序動(dòng)作結(jié)束時(shí)且元素坐標(biāo)已經(jīng)發(fā)生改變時(shí)觸發(fā)此事件。
定義：$(‘.selector’).sortable({ update: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });

receive
當(dāng)一個(gè)已連接的sortable對(duì)象接收到另一個(gè)sortable對(duì)象的元素后觸發(fā)此事件。
定義：$(‘.selector’).sortable({ receive: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });

over
當(dāng)一個(gè)元素拖拽移入另一個(gè)sortable對(duì)象后觸發(fā)此事件。
定義：$(‘.selector’).sortable({ over: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortover’, function(event, ui) { … });

out
當(dāng)一個(gè)元素拖拽移出sortable對(duì)象移出并進(jìn)入另一個(gè)sortable對(duì)象后觸發(fā)此事件。
定義：$(‘.selector’).sortable({ out: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortout’, function(event, ui) { … });

activate
當(dāng)一個(gè)有使用連接的sortable對(duì)象開(kāi)始排序動(dòng)作時(shí)，所有允許的sortable觸發(fā)此事件。
定義：$(‘.selector’).sortable({ activate: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });
deactivate
當(dāng)一個(gè)有使用連接的sortable對(duì)象結(jié)束排序動(dòng)作時(shí)，所有允許的sortable觸發(fā)此事件。
定義：$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
綁定：$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });

（2）方法

destory
從元素中移除拖拽功能。
用法：.sortable( ‘destroy’ )

disable
禁用元素的拖拽功能。
用法：.sortable( ‘disable’ )

enable
啟用元素的拖拽功能。
用法：.sortable( ‘enable’ )

option
獲取或設(shè)置元素的參數(shù)。
用法：.sortable( ‘option’ , optionName , [value] )

serialize
獲取或設(shè)置序列化后的每個(gè)item元素的id屬性。
用法：.sortable( ‘serialize’ , [options] )

toArray
獲取序列化后的每個(gè)item元素的id屬性的數(shù)組。
用法：.sortable( ‘toArray’ ）

refresh
手動(dòng)重新刷新當(dāng)前sortable對(duì)象的item元素的排序。
用法：.sortable( ‘refresh’ )

refreshPositions
手動(dòng)重新刷新當(dāng)前sortable對(duì)象的item元素的坐標(biāo)，此方法可能會(huì)降低性能。
用法：.sortable( ‘refreshPositions’ )

cancel
取消當(dāng)前sortable對(duì)象中item元素的排序改變。
用法：.sortable( ‘cancel’ )

6、一個(gè)稍微復(fù)雜一點(diǎn)的例子：
//效果： 每次排序之后，按順序把每一項(xiàng)的ID輸出來(lái)
<style>
.sortable { list-style-type: none; margin:0; padding:0; width:60%;}
.sortable li { margin:0 3px 3px 3px; padding: 0.4em;
        padding-left: 1.5em; font-size: 1.4em; height: 18px; cursor: move ;}
.sortable li span { position: absolute; margin-left:-1.3em;}
.ui-state-highlight { height: 1.5em; line-height: 1.2em;}
</style>
<script>
 $(function(){
   $(".sortable").sortable({
   placeholder:"ui-state-highlight",//拖動(dòng)時(shí)，用css
   cursor:"move",
   items :"li",//只是li可以拖動(dòng)
   opacity:0.6,//拖動(dòng)時(shí)，透明度為0.6
   revert:true,//釋放時(shí)，增加動(dòng)畫(huà)
   update :function(event, ui){//更新排序之后
var text="排序?yàn)椋?quot;;
       $(".sortable li").each(function(){
           text = text + $(this).attr("id")+" ";
})
       alert(text);//把排序的ID彈出
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default"  id="item-1">Item 1--from ifxoxo.com</li>
<li class="ui-state-default"  id="item-2">Item 2--from ifxoxo.com</li>
<li class="ui-state-default"  id="item-3">Item 3--from ifxoxo.com</li>
<div class="ui-state-default"> Div 4-- from <a href="ifxoxo.com">ifxoxo.com</a></div>
</ul>
截圖如下：
jquery ui（六）拖動(dòng)排序 sortable

展示排序結(jié)果–ifxoxo.com

三、其他jquery ui 文章

1、jquery ui（一）簡(jiǎn)介
2、jquery ui（二）拖拽 draggable和droppable
3、jquery ui（三）彈出窗口 dialog
4、jquery ui（四）進(jìn)度條 progressbar
5、jquery ui（五）日期選擇器 datepicker
6、jquery ui（六）拖動(dòng)排序 sortable


向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手