jquery上移/下移排除元素

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

它遠離優雅，但它的作品。希望這可以幫助某人。 =）