jquery move up/down excluding element

390

November 26, 2016, at 9:49 PM

I am trying to move the .draggable div up and down, bypassing the .operator div. If you try to move #tb2 up, it will switch with #tb1 and skip over the .operator select.

The script.

$('#btAdd').click(function() {
    //increase count
    iCnt = iCnt + 1;
    //var to remove item
    var rmiCnt = 'tb' + iCnt;   
    //html for each segment
    $('#segment-container').append('<div id="' + rmiCnt + '" class="draggable"><div class="two-thirds first"><input type="text" value="" name="name" placeholder="Segment ' + iCnt + '" /></div><div class="one-third right"><a class="arrow up" href="javascript:void(0)" onclick="move_up(\'' + rmiCnt +'\', \'' + iCnt +'\')" title="Move Up One"><i class="fa fa-caret-up"></i></a><a class="arrow down" href="javascript:void(0)" title="Move Down One" onclick="move_down(\'' + rmiCnt +'\', \'' + iCnt +'\')"><i class="fa fa-caret-down"></i></a><div class="clearfix"></div></div></div>');
    $('.draggable + .draggable').before($('<div class="operator"><div class="one-third first"><label for="fetch_list">Operator</label></div><div class="two-thirds"><select name="fetch_list"><option value="Merge">Merge</option><option value="Merge Dedupe">Merge Dedupe</option><option value="Supress">Supress</option></select></div></div>'));
});
//move position of segments up
window.move_up = function(outterid, count) {
    var $node = $("div#" + outterid);
    $node.prev().before($node);
};

This is what the rendered HTML looks like for reference.

<a href="javascript:void(0)" title="Add Item" id="btAdd">Add Item</a>
<div class="droppable" id="segment-container">
  <div class="draggable" id="tb1">
    <div class="two-thirds first">
  <input type="text" placeholder="Segment 1" name="name" value="">
    </div>
    <div class="one-third right"><a title="Move Up One" onclick="move_up('tb1', '1')" href="javascript:void(0)" class="arrow up"><i class="fa fa-caret-up"></i></a><a onclick="move_down('tb1', '1')" title="Move Down One" href="javascript:void(0)" class="arrow down"><i class="fa fa-caret-down"></i></a>
      <div class="clearfix">    </div>
    </div>
  </div>
  <div class="operator">
    <div class="one-third first">
  <label for="show_options">Operator</label>
    </div>
    <div class="two-thirds">
  <select name="show_options">
    <option value="Opt_one">Opt_one</option>
    <option value="Opt_two">Opt_two</option>
    <option value="Opt_three">Opt_three</option>
  </select>
    </div>
  </div>
  <div class="draggable" id="tb2">
    <div class="two-thirds first">
  <input type="text" placeholder="Segment 2" name="name" value="">
    </div>
    <div class="one-third right"><a title="Move Up One" onclick="move_up('tb2', '2')" href="javascript:void(0)" class="arrow up"><i class="fa fa-caret-up"></i></a><a onclick="move_down('tb2', '2')" title="Move Down One" href="javascript:void(0)" class="arrow down"><i class="fa fa-caret-down"></i></a>
      <div class="clearfix">    </div>
    </div>
  </div>
  <div class="operator">
    <div class="one-third first">
  <label for="show_options">Operator</label>
    </div>
    <div class="two-thirds">
  <select name="show_options">
    <option value="Opt_one">Opt_one</option>
    <option value="Opt_two">Opt_two</option>
    <option value="Opt_three">Opt_three</option>
  </select>
    </div>
  </div>
  <div class="draggable" id="tb3">
    <div class="two-thirds first">
  <input type="text" placeholder="Segment 3" name="name" value="">
    </div>
    <div class="one-third right"><a title="Move Up One" onclick="move_up('tb3', '3')" href="javascript:void(0)" class="arrow up"><i class="fa fa-caret-up"></i></a><a onclick="move_down('tb3', '3')" title="Move Down One" href="javascript:void(0)" class="arrow down"><i class="fa fa-caret-down"></i></a>
      <div class="clearfix">    </div>
    </div>
  </div>
</div>

I have tried setting a class of .draggable on the prev() but it doesn't do anything. Any help would be awesome! Thanks!

Answer 1

I worked out a solution but its not pretty.

window.move_up = function(outterid, count) {
  //get the id of the current item
  var $node = $("#" + outterid);
  //remove the operator above the section to move up
  $node.prev().remove('.operator');
  //move the section above the previous one
  $node.prev().before($node);
  //add the operator back in
  append_operator();
};

Moved the appending of the operator to a function.

function append_operator() {
  $('.draggable + .draggable').before($('<div class="operator"><div class="one-third first"><label for="fetch_list">Operator</label></div><div class="two-thirds"><select name="fetch_list"><option value="Merge">Merge</option><option value="Merge Dedupe">Merge Dedupe</option><option value="Supress">Supress</option></select></div></div>'));
}

Its far from elegant but it works. Hope this helps someone. =)