拖放可拖动元素拖放到其他容器,但不是自己?
问题描述:
引用了JQuery UI Droppable示例之后:购物车。我重写它进行测试。但遇到了一些问题。拖放可拖动元素拖放到其他容器,但不是自己?
假设:
产品容器:拖放产品进入购物车容器。
<div class="products">
<ul>
<li> product 1 </li>
...
</ul>
</div>
和购物车集装箱:
<div class="shoppingCart1">
... dropped products here
</div>
和他人的购物车容器:
<div class="shoppingCar2">
... dropped products here
</div>
我想shoppingCart1的产品可以拖放到其他购物车容器而不是它本身,而副versa.Eg:
问题是:
当产品已在S *被丢弃hoppingCart1 *,然后我可以拖放的产品shoppingCart1至其他购物车集装箱。但似乎当我拖放自己的产品时,它也追加的产品。我的意思是当我拖动shoppingCart1的产品并放入shoppingCart1本身,它附加到shoppingCart1,也是。
非常感谢!从JQuery用户界面可放开我的代码重新编写的
部分:购物车〔实施例[不为我想工作]
this.igtoMDMovieList = $('<div />',{'class':'igtoMDMovieList'})
.appendTo(this.igtoMDMovieListWrapper);
this.igtoMDMovieListOL = $('<ol />',{'class':'igtoMDMovieListOL'})
.html('<li class="placeholder">Add your items here</li>')
.appendTo(this.igtoMDMovieList)
.droppable({
accept:'li',
drop: function(event, ui) {
$("<li></li>")
.text(ui.draggable.text())
.appendTo(obj.igtoMDMovieListOL)//$(this).children()
.draggable({
appendTo: "#desktopFrame",
helper: "clone"
})
}
})
.sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$(this).removeClass("ui-state-default");
}
});
答
这将确保事情不会得到复制任何列表! 它使用data-id
属性为每个产品提供一个产品ID。
$("#products li").draggable({
appendTo: "body",
helper: "clone"
});
$(".shoppingCart ol").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$(this).removeClass("ui-state-default");
}
});