Come creare trascinabili nidificabili in Scriptaculous?

Question

Sto usando la libreria Scriptaculous per dare uno schiaffo a un'interfaccia utente accattivante su un'applicazione che aiuta gli utenti a compilare elenchi. Diciamo che è per la creazione di pizza.

Per compilare un ordine, trascina una dimensione di pizza dalla tavolozza della pizza negli ordini trascinabili. Una volta inserito, viene sostituito con un nuovo div che è sia trascinabile (perché puoi spazzarlo via spostandolo di nuovo nella palette) sia trascinabile (perché puoi aggiungere ingredienti ad esso).

È quindi possibile aggiungere gli ingredienti dalla tavolozza degli ingredienti a una qualsiasi delle pizze presenti nel gruppo di ordini.

Ho implementato con successo questi bit e tutto funziona bene. Lo stickler: se provo a trascinare e rilasciare l'ingrediente da una pizza posizionata, che è correttamente contrassegnata come trascinabile e che, per buona misura, è posizionata a z sopra la pizza, afferra invece la pizza all'ingrosso. Questo mi rende impossibile annullare la selezione degli ingredienti, che è una caratteristica chiave di questa schermata.

Qualche suggerimento su come posso ottenere questo per fare quello che voglio? Idealmente, vorrei mantenere la semplice interfaccia utente drag-on e drag-off in quanto mondi più intuitiva di quella che stavamo usando in precedenza. (Un modulo HTML multistadio ... shudder ...)

Answer 1

Si scopre, dopo alcuni giorni di sbattere la testa contro vari muri, che Scriptaculous anniderà felicemente le cose per impostazione predefinita.

Il problema è quando la tua chiamata a draggable_element assomiglia a questo

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

anziché

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

D'oh!

Answer 2

Prova questo, penso che sia vicino a quello che stai cercando di fare. Sto usando un ordinabile per l'elenco a sinistra. Potrebbe non essere necessario.

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