title: Move object up and down within array
body: <p>I have a table of data that is rendered from an object. Specifically, each row of the table is a value from the array.</p>
  
  <p>I need to be able to move the object up or down in the array, depending on the button clicked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 += "&lt;tr&gt;&lt;td&gt;" + obj[key].Value + "&lt;/td&gt;&lt;td&gt;&lt;a href=\"#\" onClick=\"move('up', " + obj[key].RuleDetailID + ")\"&gt;Move Up&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;a href=\"#\" onClick=\"move('down', " + obj[key].RuleDetailID + ")\"&gt;Move Down&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
    }
    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.
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tbody id="example"&gt;
      &lt;script&gt;
        document.write(renderExample())
      &lt;/script&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can this be done with something like <code>lodash</code> or is it more of a manual approach? I tried by getting the index of the clicked item and then doing <code>+1</code> or <code>-1</code> accordingly to give me the new index. However, I wasn't sure what to do at that point since another item would already exist at that index.</p>
  
  <p>How can I go about achieving this? Not looking for a jQuery approach, javascript or a library such as <code>lodash</code> only.</p>