web-dev-qa-db-fra.com

Déplacez un élément d'un endroit vers le haut ou le bas dans l'arborescence des doms avec javascript

Je veux un moyen javascript pour déplacer un élément d'un endroit vers le haut ou le bas dans l'arborescence d'un parent connu en utilisant javascript (ou jquery est ok), mais je veux que le script sache quand un élément est le premier ou le dernier élément du parent et ne pas être déplacé. par exemple, si j'ai ce qui suit ...

<div id='parent_div'>
    <div id='div_1'></div>
    <div id='div_2'></div>
    <div id='div_3'></div>
</div>

au clic d'un bouton, je veux passer un identifiant connu (disons div_2) et le déplacer jusqu'à la position au-dessus de lui, en échangeant sa position avec l'élément qui le précédait auparavant (dans ce cas, div_1). Les identifiants des éléments ne doivent pas changer et leur nouvelle position n'a pas besoin d'être connue, du moins pas à moins qu'ils soient déplacés à nouveau.

javascriptjquerydommove
20
Peter Cullen

Avec jQuery:

var e = $("#div_2");
// move up:
e.prev().insertAfter(e);
// move down:
e.next().insertBefore(e);
32
Gavriel

Déplacer element "up":

if(element.previousElementSibling)
  element.parentNode.insertBefore(element, element.previousElementSibling);

Déplacer element "bas":

if(element.nextElementSibling)
  element.parentNode.insertBefore(element.nextElementSibling, element);


function moveUp(element) {
  if(element.previousElementSibling)
    element.parentNode.insertBefore(element, element.previousElementSibling);
}
function moveDown(element) {
  if(element.nextElementSibling)
    element.parentNode.insertBefore(element.nextElementSibling, element);
}
document.querySelector('ul').addEventListener('click', function(e) {
  if(e.target.className === 'down') moveDown(e.target.parentNode);
  else if(e.target.className === 'up') moveUp(e.target.parentNode);
});
.up, .down        { cursor: pointer; }
.up:after         { content: '△'; }
.up:hover:after   { content: '▲'; }
.down:after       { content: '▽'; }
.down:hover:after { content: '▼'; }
<ul>
  <li>1<span class="up"></span><span class="down"></span></li>
  <li>2<span class="up"></span><span class="down"></span></li>
  <li>3<span class="up"></span><span class="down"></span></li>
  <li>4<span class="up"></span><span class="down"></span></li>
  <li>5<span class="up"></span><span class="down"></span></li>
</ul>

15
Oriol

Obtenez tous les div enfants avec l'identifiant parent div (#parent_div) en utilisant la fonction $ .each de jQuery. supposons que vous vouliez permuter div3 avec div2, alors l'indice de div3 sera 2. utilisez $ (# div_3) .insertBefore (# div_2) 

1
Jagajit Prusty

Vous pouvez utiliser la méthode .index() intégrée de JQuery pour obtenir l'emplacement d'un élément enfant et obtenir la valeur .length sous la forme d'un élément parent pour connaître le nombre d'éléments. 

Si index renvoie 0, il s'agit du premier élément. Si index renvoie la longueur de l'élément parent -1, alors vous savez qu'il s'agit du dernier élément. 

Pour déplacer les éléments eux-mêmes, vous pouvez utiliser .insertBefore et .prev pour déplacer un élément vers le haut.

    var Elm = $("selector_for_the_element");
    Elm.insertBefore(Elm.prev());

Pour déplacer un élément vers le bas, vous pouvez utiliser insertAfter et .next 

    var Elm = $("selector_for_the_element");
    Elm.insertAfter(Elm.next());
1
DominicValenciana