JavaScript：リストの要素を上下に移動する

Question

ボタンのクリックでリストの要素を上下に移動するスクリプトを作成しています。

私はjQueryで動作させることができますが、これを純粋な（バニラ）JavaScriptで記述するのは困ります。私は、プレーンJavaScriptで同じことを行うことができますどのように

$(function() { 
 
    $('.up').on('click', function(e) { 
 
    var wrapper = $(this).closest('li') 
 
    wrapper.insertBefore(wrapper.prev()) 
 
    }) 
 
    $('.down').on('click', function(e) { 
 
    var wrapper = $(this).closest('li') 
 
    wrapper.insertAfter(wrapper.next()) 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
    <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
    <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
    <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
    <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
    <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
</ul>

？

：

Answer 1

ホープこれを使用することができ

window.onload = function() { 
 
\t var upLink = document.querySelectorAll(".up"); 
 

 
\t for (var i = 0; i < upLink.length; i++) { 
 
\t \t upLink[i].addEventListener('click', function() { 
 
\t \t \t var wrapper = this.parentElement; 
 

 
\t \t \t if (wrapper.previousElementSibling) 
 
\t \t \t  wrapper.parentNode.insertBefore(wrapper, wrapper.previousElementSibling); 
 
\t \t }); 
 
\t } 
 

 
\t var downLink = document.querySelectorAll(".down"); 
 

 
\t for (var i = 0; i < downLink.length; i++) { 
 
\t \t downLink[i].addEventListener('click', function() { 
 
\t \t \t var wrapper = this.parentElement; 
 

 
\t \t \t if (wrapper.nextElementSibling) 
 
\t \t \t  wrapper.parentNode.insertBefore(wrapper.nextElementSibling, wrapper); 
 
\t \t }); 
 
\t } 
 
}

<ul> 
 
\t <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
\t <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
\t <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
\t <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
\t <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
\t <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li> 
 
</ul>

Answer 2

あなたはこのことができますコードの下

`関数listbox_move（listID、方向）{

var listbox = document.getElementById(listID); 
var selIndex = listbox.selectedIndex; 

if(-1 == selIndex) { 
    alert("Please select an option to move."); 
    return; 
} 

var increment = -1; 
if(direction == 'up') 
    increment = -1; 
else 
    increment = 1; 

if((selIndex + increment) < 0 || 
    (selIndex + increment) > (listbox.options.length-1)) { 
    return; 
} 

var selValue = listbox.options[selIndex].value; 
var selText = listbox.options[selIndex].text; 
listbox.options[selIndex].value = listbox.options[selIndex + increment].value 
listbox.options[selIndex].text = listbox.options[selIndex + increment].text 

listbox.options[selIndex + increment].value = selValue; 
listbox.options[selIndex + increment].text = selText; 

listbox.selectedIndex = selIndex + increment; 

}`

Refrerence Example