Как создать в Scriptaculous вложенные перетаскиваемые объекты? - PullRequest
Новая
       37

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

2 голосов
/ 09 октября 2008

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

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 13 октября 2008

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

Проблема в том, когда ваш звонок на draggable_element выглядит следующим образом 

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

вместо 

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

D'ой!

0 голосов
/ 09 октября 2008

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

<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})
}
...