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中拖拽排序问题的分析了,希望大家能够喜欢。