jqueryUI里拖拽排序示例分析
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ （这个站需要FQ才能看到效果）
其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序
这个是html代码
<divid="products">
<h1class="ui-widget-header">Products</h1>
<divid="catalog">
<h2><ahref="#">T-Shirts</a></h2>
<div>
<ul>
<li>LolcatShirt</li>
<li>CheezeburgerShirt</li>
<li>BuckitShirt</li>
</ul>
</div>
<h2><ahref="#">Bags</a></h2>
<div>
<ul>
<li>ZebraStriped</li>
<li>BlackLeather</li>
<li>AlligatorLeather</li>
</ul>
</div>
<h2><ahref="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<divid="cart">
<h1class="ui-widget-header">ShoppingCart</h1>
<divclass="ui-widget-content">
<ol>
<liclass="placeholder">Addyouritemshere</li>
</ol>
</div>
</div>
这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序，橙色代码部分不太理解，好像没用的样子
$(function(){
$("#catalog").accordion();
$("#catalogli").draggable({
appendTo:"body",
helper:"clone",
connectToSortable:"#cartol"
});
$("#cartol").sortable({
items:"li:not(.placeholder)",
connectWith:"li",
sort:function(){
$(this).removeClass("ui-state-default");
},
over:function(){
//hidestheplaceholderwhentheitemisoverthesortable
$(".placeholder").hide();
},
out:function(){
if($(this).children(":not(.placeholder)").length==0){
//showstheplaceholderagainiftherearenoitemsinthelist
$(".placeholder").show();
}
}
});
});
另外值得一提的是
.ui-state-default貌似是拖拽时内置的一些类，对应的还有
ui-state-hover等分别对应当有可以拖拽的对象在拖拽时，和拖拽到容器时的效果，本文代码没有体现。
以上就是关于jQueryUI中拖拽排序问题的分析了，希望大家能够喜欢。