Question

我试图上下移动.draggable div，绕过.operator div。如果您尝试向上移动＃tb2，它将使用#tb1切换并跳过.operator选择。

剧本。

$('#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);
};

这就是渲染的HTML看起来像是供参考。

<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>

我尝试在prev（）上设置一个.draggable类，但它没有做任何事情。任何帮助都是极好的！谢谢！

Answer 1

我制定了一个解决方案，但它并不漂亮。

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();
};

将运算符的追加移动到函数。

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>'));
}

它远非优雅但它的作品。希望这有助于某人。 =）

jquery向上/向下移动排除元素

1 个答案: