Пользовательский интерфейс перетаскиваемый + капли добавить в любом месте? - PullRequest
Новая
       11

Пользовательский интерфейс перетаскиваемый + капли добавить в любом месте?

2 голосов
/ 24 февраля 2012

Я использую что-то очень похожее на это:

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

В настоящее время при перетаскивании элемента он добавляется в список.

Как ясделать так, чтобы он добавлялся после элемента, над которым я нахожусь?

Кроме того, как я могу заставить каждую «категорию продукта» принимать элементы из других категорий?Так, например, если я перетащу «рубашку lolcat» в категорию «сумки», то категория сумок расширится и позволит мне бросить рубашку в любое место внутри нее:)

Fiddle Demo

Ответы [ 2 ]

3 голосов
/ 24 февраля 2012

По первому вопросу: сделайте элементы списка целей «сбрасываемыми» (не сам список целей): 

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

То же самое для второго вопроса: сделать каталог доступным (аналогичный код).

2 голосов
/ 12 марта 2012

Ну, это неловко.Должно быть, я прочитал все , но ваше требование добавить новый элемент после того, как элемент завис.Изменения ниже + обновлено 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();

Мы сделаем каталог ввыпадающий и сделать хорошую функцию, как обещано выше. 

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/

Ссылка обновлена ​​

...