Question

如何上下移动多选复选框列表项

 <div id="ListElement">
    <ul><li><label><input type="checkbox"/>ProfileSender/Author</label></li>                    
    <li><label><input type="checkbox"/>Profile Recipient</label></li>
    <li><label><input type="checkbox"/>Profile Subject/Title</label></li>
    <li><label><input type="checkbox" />Document Review Doc ID</label></li>
    <li><label><input type="checkbox" />Profile Date</label></li>
    </ul><span><a class="upArrow ser-arrow-up" title="Move Up" onclick="moveUpDown(true)"></a> <a class="downArrow ser-arrow-down" onclick="moveUpDown(false)" title="Move Down"></a></span>
    </div>

Answer 1

这项工作对我来说

function moveUpDown(isUp) {  
    var selectedItems = $('#ListElement ul li.is-active').map(function() {
        return this;//.parent().text();
    }).get();

    if(selectedItems.length==0){
        var msg = isUp==true? "Please select items to be moved up." :"Please select items to be moved down.";   
        alert (msg);
        return
    }

    if(isUp){       
        var first = 0;
        $.each(selectedItems, function(index, listItem){          
            var oldIndex = $( "#ListElement ul li" ).index( listItem );
               if(oldIndex != first) var newIndex = oldIndex - 1;
            $('#ListElement ul > li:eq('+newIndex+')').before(listItem);
        });
    }else{
         var last =  $('#ListElement ul > li').size()-1;
        //console.log(last);
        $.each(selectedItems.reverse(), function(index, listItem){
            var oldIndex = $( "#ListElement ul li" ).index( listItem );
                if(oldIndex != last) var newIndex = oldIndex + 1;
            $('#ListElement ul > li:eq('+newIndex+')').after(listItem);
        });
    }
}

Answer 2

您可以使用sortable

$("#sortable").sortable();

这里的jsfiddle演示：

http://jsfiddle.net/87mCR/

尝试用鼠标拖动一个li

如何上下移动多选复选框列表项

2 个答案: