jqueryUI里拖拽排序示例分析
示例參考http://jsfiddle.net/KyleMit/Geupm/2/ (這個(gè)站需要FQ才能看到效果)
其實(shí)是jqueryUI官方購(gòu)物車拖拽添加例子的增強(qiáng)版,就是在拖拽的時(shí)候增加了排序
這個(gè)是html代碼
<div id="products">
<h1 class="ui-widget-header">Products</h1>
<div id="catalog">
<h2><a href="#">T-Shirts</a></h2>
<div>
<ul>
<li>Lolcat Shirt</li>
<li>Cheezeburger Shirt</li>
<li>Buckit Shirt</li>
</ul>
</div>
<h2><a href="#">Bags</a></h2>
<div>
<ul>
<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add your items here</li>
</ol>
</div>
</div>
這個(gè)是js代碼主要在js代碼中紅色代碼部分設(shè)置了可以拖動(dòng)進(jìn)入時(shí)就排序,橙色代碼部分不太理解,好像沒(méi)用的樣子
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone",
connectToSortable: "#cart ol"
});
$("#cart ol").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
sort: function () {
$(this).removeClass("ui-state-default");
},
over: function () {
//hides the placeholder when the item is over the sortable
$(".placeholder").hide();
},
out: function () {
if ($(this).children(":not(.placeholder)").length == 0) {
//shows the placeholder again if there are no items in the list
$(".placeholder").show();
}
}
});
});
另外值得一提的是
.ui-state-default貌似是拖拽時(shí)內(nèi)置的一些類,對(duì)應(yīng)的還有
ui-state-hover等分別對(duì)應(yīng)當(dāng)有可以拖拽的對(duì)象在拖拽時(shí),和拖拽到容器時(shí)的效果,本文代碼沒(méi)有體現(xiàn)。
以上就是關(guān)于jQueryUI中拖拽排序問(wèn)題的分析了,希望大家能夠喜歡。
- 簡(jiǎn)單的jQuery拖拽排序效果的實(shí)現(xiàn)(增強(qiáng)動(dòng)態(tài))
- 針對(duì)后臺(tái)列表table拖拽比較實(shí)用的jquery拖動(dòng)排序
- jQuery實(shí)現(xiàn)div橫向拖拽排序的簡(jiǎn)單實(shí)例
- 通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例
- jQuery拖拽排序插件制作拖拽排序效果(附源碼下載)
- jquery拖拽排序簡(jiǎn)單實(shí)現(xiàn)方法(效果增強(qiáng)版)
- 簡(jiǎn)單的jquery拖拽排序效果實(shí)現(xiàn)代碼
- jquery拖拽自動(dòng)排序插件使用方法詳解
相關(guān)文章
jQuery easyui datagrid動(dòng)態(tài)查詢數(shù)據(jù)實(shí)例講解
接下來(lái)將從前臺(tái)提交查詢條件,從MSSQL返回json數(shù)據(jù)的一個(gè)事例來(lái)講解一下datagrid動(dòng)態(tài)查詢數(shù)據(jù),感興趣的你可不要錯(cuò)過(guò)了哈,希望本文可以幫助到你2013-02-02jquery實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
如何實(shí)現(xiàn)input輸入框?qū)崟r(shí)輸入觸發(fā)事件,下面有個(gè)不不錯(cuò)的示例使用jquery實(shí)現(xiàn)的,感興趣的朋友可以參考下2014-01-01jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用介紹
本篇文章介紹了,jQuery 遍歷-nextUntil()方法以及prevUntil()方法的使用。需要的朋友參考下2013-04-04用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能
這篇文章主要介紹了用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-11-11javascript基于jQuery的表格懸停變色/恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox
jQuery的表格懸停變色 恢復(fù),表格點(diǎn)擊變色/恢復(fù),點(diǎn)擊行選Checkbox2008-08-08Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子
這篇文章主要介紹了Jquery選擇器中使用變量實(shí)現(xiàn)動(dòng)態(tài)選擇例子,這樣做的好處我們可以動(dòng)態(tài)選擇一些元素,核心思想其實(shí)就是用字符串組合,需要的朋友可以參考下2014-07-07jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器(商城可用)
這篇文章主要介紹了jquery實(shí)現(xiàn)一個(gè)全局計(jì)時(shí)器,商城一類都可以使用2017-06-06