jqueryUI里拖拽排序示例分析_jquery
程序员文章站
2022-05-18 15:43:10
...
示例参考http://jsfiddle.net/KyleMit/Geupm/2/ （这个站需要FQ才能看到效果）
$(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();
}
}
});
});
其实是jqueryUI官方购物车拖拽添加例子的增强版，就是在拖拽的时候增加了排序
这个是html代码
复制代码 代码如下:
Products
T-Shirts
- Lolcat Shirt
- Cheezeburger Shirt
- Buckit Shirt
Bags
- Zebra Striped
- Black Leather
- Alligator Leather
Gadgets
- iPhone
- iPod
- iPad
Shopping Cart
这个是js代码主要在js代码中红色代码部分设置了可以拖动进入时就排序，橙色代码部分不太理解，好像没用的样子
复制代码 代码如下:
$(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貌似是拖拽时内置的一些类，对应的还有
ui-state-hover等分别对应当有可以拖拽的对象在拖拽时，和拖拽到容器时的效果，本文代码没有体现。
以上就是关于jQueryUI中拖拽排序问题的分析了，希望大家能够喜欢。