Как создать вложенные перетаскиваемые элементы в Scriptaculous?

Я использую библиотеку Scriptaculous, чтобы создать привлекательный пользовательский интерфейс для приложения, которое помогает конечному пользователю создавать списки. Скажем, для создания пиццы.

Чтобы заполнить заказ, вы перетаскиваете размер пиццы из палитры пиццы в выпадающие заказы. Как только он помещается туда, он заменяется новым div, который можно перетаскивать (потому что вы можете избавиться от него, перемещая его обратно в палитру) и сбрасывать (потому что вы можете добавлять в него ингредиенты).

Затем вы можете добавить ингредиенты из своей палитры ингредиентов к любой из пицц, которые у вас есть в группе заказов.

Я успешно реализовал эти биты, и все работает нормально. Приверженец: если я попытаюсь перетащить ингредиент из размещенной пиццы, которая правильно помечена как перетаскиваемая и которая, на всякий случай, расположена над пиццей по оси z, вместо этого он захватит всю пиццу целиком. Это делает невозможным отмену выбора ингредиентов, что является ключевой особенностью этого экрана.

Любые предложения о том, как я могу заставить это делать то, что я хочу? В идеале я хотел бы сохранить простой пользовательский интерфейс с перетаскиванием, поскольку он миры более интуитивно понятен, чем то, что мы использовали ранее. (Многоступенчатая HTML-форма... содрогание...)


javascript drag-and-drop draggable scriptaculous
person Patrick McKenzie    schedule 09.10.2008    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Оказывается, после нескольких дней биться головой о разные стены, Scriptaculous по умолчанию с удовольствием вкладывает вещи.

Проблема в том, что ваш вызов draggable_element выглядит так

<% draggable_element blah blah blah blah blah blah blah%>

вместо

<%= draggable_element blah blah blah blah blah blah blah %>

D'oh!

person Patrick McKenzie    schedule 13.10.2008
comment
Так что это больше проблема, вызванная ASP.NET? - person Tomalak; 13.10.2008
comment
Это проблема Rails, вызванная PEBKAC;) - person Patrick McKenzie; 14.10.2008

arrow_upward
0
arrow_downward

Попробуйте это, я думаю, что это близко к тому, что вы пытаетесь сделать. Я использую сортировку для списка слева. Возможно, вам это не нужно.

<table border="1" cellpadding="5">
<tr>
    <td valign="top">
        <ul id='fList' style='border:1px solid #c0c0c0'>
            <li class='fruit'>Apples</li>
            <li class='fruit'>Grapes</li>
            <li class='fruit'>Strawberries</li>
        </ul>
        (drag items or panel)
    </td>
    <td valign="top">
        <div id='fish' class='meat'>Fish</div>
        <div id='chicken' class='meat'>Chicken</div>
        (drop to left list)
    </td>
</tr></table>



Sortable.create("fList", {constraint:false})
new Draggable('fish',{revert:true})
new Draggable('chicken',{revert:true})
new Draggable('fList')
Droppables.add('fList',{accept:'meat',onDrop:function(dragName,dropName){placeFood(dragName,dropName)}})
Droppables.add('fList',{accept:'fruit'})

function placeFood(dragName,dropName) {
    $("fList").insert(new Element("li", { id: $(dragName).id+"_" }))
    $($(dragName).id+"_").innerHTML = $(dragName).innerHTML
    Sortable.destroy("fList")
    Sortable.create("fList", {constraint:false})
}
person Diodeus - James MacFarlane    schedule 09.10.2008