Question

我正在使用与此类似的东西：

http://jqueryui.com/demos/droppable/#shopping-cart

目前，当我拖动一个项目时，它会被附加到列表中。

我该如何制作它以便在我悬停的项目后附加？

另外，如何让每个“产品类别”接受其他类别的商品？因此，例如，如果我在“包”类别上拖动“lolcat衬衫”，那么包类别将会扩展，并允许我将衬衫放在我想要的任何地方：）

Answer 1

对于第一个问题：使目标列表中的项目“droppable”（不是目标列表本身）：

$( "#cart li" ).droppable({
    drop: function( event, ui ) {
        $( this ).siblings( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).insertAfter( this );
    }
});

第二个问题相同：使目录可以删除（类似代码）。

Answer 2

嗯，这很尴尬。我必须阅读所有但您在项目悬停后附加新项目的要求。以下更改+更新的jsfiddle。

答案更新

多个可排序/可拖动/可放置的集成确实是一场噩梦。

首先，我们将购物车和产品列表分类为可排序

$("#catalog ul, #cart ol").sortable().disableSelection();

差不多完成:)现在我们需要在目录上添加自定义处理的dragdrop释放（将项目移动到新的子类别）或在购物车上（将项目克隆到购物车）

让我们从购物车开始：

这是更新的部分，其中创建一个droppable被移动到一个函数中，因此可以重用它;它也不再从购物车容器中创建，而是从购物车中的单个商品创建，因此可以单独跟踪它们并在其后插入项目。

//EDIT - for the droppable behaviour to meet the requiremens,
//we need to make individual items in the cart into droppables;
//as more elements are added at runtime, droppable has to be
//re-initiated, otherwise you'll end up only being to drop
//onto the first item in the cart (not cool)
function initDroppable() {
    $("#cart ol li").droppable({
        accept: "#catalog ul li",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            //we're going to clone the item from the cart and
            //insert it after "this", which refers to the item
            //in cart being "dropped onto"
            $("<li></li>").text(ui.draggable.text()).insertAfter(this);
            $("#cart ol li").droppable("destroy");
            initDroppable();
            event.preventDefault();
            return false;
        }
    });
}

//now initialize the cart as a droppable for the first run
initDroppable();

我们将把目录编成一个droppable并按照上面的承诺做一个很好的功能。

var $catalog_items = $("h3" ).droppable({
    accept: "#catalog ul li",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        //reference to the original item that's being dragged
        var $item = $(event.target);
        //well, this is awkward. I couldn't find it in jQuery
        //doco how to find the accordion's list... so we are
        //looking for a "ul" inside of the element that
        //immediately follows the accordion expander element
        //This works out to be "ul inside a div after this h3" :)
        var $list = $("ul", $(this).next());
        //now remove the original item...
        $item.remove();
        //...and add the item to its new parent :)
        //NB simply appending $item didn't work
        $("<li></li>").text(ui.draggable.text()).appendTo($list);
        //new accordion structure = new size
        $catalog.accordion("resize");
        //and trigger the accordion to expand on the correct category
        $(this).click();

        event.preventDefault();
        return false;
    }
});

这几乎涵盖了它。如果你想看到它的实际效果，你可以在这里玩我的小提琴：http://jsfiddle.net/ZpaJP/3/

链接已更新

UI draggable + droppable附加在任何地方？

2 个答案:

答案更新