オブジェクトを配列内で上下に移動

Question

オブジェクトからレンダリングされるデータの表があります。具体的には、表の各行は配列の値です。

クリックしたボタンに応じて、配列内のオブジェクトを上下に移動できるようにする必要があります。

var obj = [{ 
 
    "RuleDetailID": "11624", 
 
    "AttributeValue": "172", 
 
    "Value": "Account Manager", 
 
    "IsValueRetired": "0" 
 
}, { 
 
    "RuleDetailID": "11626", 
 
    "AttributeValue": "686", 
 
    "Value": "Agent", 
 
    "IsValueRetired": "0" 
 
}, { 
 
    "RuleDetailID": "11625", 
 
    "AttributeValue": "180", 
 
    "Value": "Analyst", 
 
    "IsValueRetired": "0" 
 
}, { 
 
    "RuleDetailID": "11629", 
 
    "AttributeValue": "807", 
 
    "Value": "Individual Contributor", 
 
    "IsValueRetired": "0" 
 
}, { 
 
    "RuleDetailID": "11627", 
 
    "AttributeValue": "690", 
 
    "Value": "Senior Agent", 
 
    "IsValueRetired": "0" 
 
}]; 
 

 
// Exmaple only, just rendering a table 
 
function renderExample() { 
 
    var table = ''; 
 
    for (var key in obj) { 
 
    table += "<tr><td>" + obj[key].Value + "</td><td><a href=\"#\" onClick=\"move('up', " + obj[key].RuleDetailID + ")\">Move Up</a></td><td></td><td><a href=\"#\" onClick=\"move('down', " + obj[key].RuleDetailID + ")\">Move Down</a></td></tr>"; 
 
    } 
 
    return table; 
 
} 
 

 
// Move the object in the array up or down 
 
function move(value, positionChange) { 
 

 
    // On run, move the object in the array up or down respectivly. 
 

 
}

<table> 
 
    <tbody id="example"> 
 
    <script> 
 
     document.write(renderExample()) 
 
    </script> 
 
    </tbody> 
 
</table>

これはlodashか、手動アプローチの詳細ですのようなものを使って行うことができますか？私は、クリックしたアイテムのインデックスを取得してから、私に新しいインデックスを与えるために+1または-1を実行してみました。しかし、別のアイテムが既にそのインデックスに存在するので、その時点で何をすべきか分からなかった。

これを達成するにはどうすればよいですか？ jQueryの手法、JavaScript、またはlodashなどのライブラリのみを探しているわけではありません。あなたが新しい位置に挿入し、その後移動したい項目を削除し、ためにまず、二回array.spliceを使用することができます

Answer 1

var data = [1,2,3,4,5]; 
 

 
function moveItem(from, to) { 
 
    // remove `from` item and store it 
 
    var f = data.splice(from, 1)[0]; 
 
    // insert stored item into position `to` 
 
    data.splice(to, 0, f); 
 
} 
 

 
moveItem(0, 2); 
 

 
console.log(data);

Answer 2

また、古い学校を使用することができます

スワップメカニズム：

function move(value, positionChange) { 
    // On run, move the object in the array up or down respectivly. 
    for (var i = 0; i < obj.length; i++) { 
    if (obj[i].RuleDetailID == positionChange) { 
     var newIndex = value === 'up' ? i - 1 : i + 1; 
     if (newIndex >= obj.length || newIndex < 0) return; 
     var temp = obj[i]; 
     obj[i] = obj[newIndex]; 
     obj[newIndex] = temp; 
     document.getElementById('example').innerHTML = renderExample(); 
    } 
    } 
}