Блог

Главная - Вопросы по программированию - Как создать удобные перетаскиваемые объекты в Scriptaculous?

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

#javascript #drag-and-drop #scriptaculous #draggable

Вопрос:

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

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

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

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

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

Ответ №1:

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

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

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

вместо

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

О!

Комментарии:

1. Так что это скорее ASP.NET вызванная проблема?

2. Это проблема рельсов, вызванная PEBKAC 😉

Ответ №2:

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

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

Метки: