Бросили перетаскиваемые элементы перетаскивать в другие контейнеры, но не в себя? - PullRequest
Новая
       3

Бросили перетаскиваемые элементы перетаскивать в другие контейнеры, но не в себя?

3 голосов
/ 22 января 2011

После ссылки на пример 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 могут перетаскиваться в другие корзины контейнер, но не сам по себе ， и наоборот. Например: 1010 **

проблема:

Когда товары были сброшены в s * hoppingCart1 *, а затем я могу перетащить товары в shoppingCart1 в другой контейнер корзины покупок .Но кажется, что когда я перетаскиваю продукты внутри себя, они также добавляют продукты.Я имею в виду, что когда я перетаскиваю продукт shoppingCart1 и вставляю саму shoppingCart1 , он также добавляется к shoppingCart1 .

Большое спасибо!

часть моего кода переписана из JQuery UI Droppable: корзина покупок не работает! [Не работает, как я хочу] 

    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" );
                                        }
                                    });

1 Ответ

2 голосов
/ 30 января 2011

Это гарантирует, что вещи не дублируются ни в одном списке.Атрибут data-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");
    }
});

Пример: http://jsfiddle.net/petersendidit/S4QgX/

...