2010-11-02 7 views
2

J'ai une liste de nœuds que je suis capable de faire glisser et déposer.Besoin d'aide pour trier les éléments

<ul id="container"> 
<li id="item_1">Item 1</li> 
<li id="item_2">Item 2</li> 
<li id="item_3">Item 3</li> 
<li id="item_4">Item 4</li> 
<li id="item_5">Item 5</li> 
<li id="item_6">Item 6</li> 
</ul> 

je peux cliquer et faire glisser # item_5 sur le dessus de # item_2 et "laisse tomber", je peux retourner la source (# item_5) et l'élément se laissa tomber sur (# item2)

Comment est-ce que j'insérerais l'élément abandonné (# item_5) avant la cible (# item_2), puis ajuster chaque nœud après le point 2 en arrière une position? J'ai besoin d'aide avec une méthode pour effectuer cette tâche

par exemple.

function movebefore(a, b) {...} 

(S'il vous plaît prendre javascript cadres comme jQuery ne peut pas être utilisés)

Le code actuel: http://jsfiddle.net/danmasq/BkNAF/

Répondre

1
function movebefore(a, b) { // If "a" is the node you're dragging and "b" is the node on top of which you dropped "a" 
    b.parentNode.insertBefore(a, b); // Or "b.nextSibling", depending on what you want to do 
} 

Il est aussi simple que cela! Le DOM prendra soin de retirer l'élément de sa position précédente et d'ajuster les autres éléments.

2

dropNode est la cible de baisse
dragNode est le nœud traîné
vous mentionné que vous aviez les deux disponibles.

var movebefore = function(dragNode , dropNode) { 

    dropNode.parentNode.insertBefore(dragNode , dropNode); 

} 
Questions connexes