javascript - Jquery 排序列表元素

Question

我的 fiddle 代码:http://jsfiddle.net/wguan/7yMSz/

当前代码允许在两个 div 框之间拖放。但我想知道如何默认自动排序，以便当我在框之间拖动时，两者都会自动从顶部的最小数字到底部的最大数字排序。

HTML

<div id="boxes_holder" class="initBox">
    <div draggable="true" class="boxes" style="text-align:center;">1</div>
    <div draggable="true" class="boxes" style="text-align:center;">2</div>
    <div draggable="true" class="boxes" style="text-align:center;">3</div>
    <div draggable="true" class="boxes" style="text-align:center;">4</div>
</div>



<div id="dragBox" class = "initBox">
    <div id="dragBoxTitle" class = "">Box</div>
</div>

CSS:

#boxes_holder{
width:100px;
height:100px;
border:0px;
display: inline-block;
float: left;
vertical-align:top;
background-color:#FBFBFB;
list-style-type: none;   
}

#dragBox{
width:100px;
height:100px;
border:0px;
display: inline-block;
float: right;
vertical-align:top;
background-color:#FBFBFB;
list-style-type: none;   
}

Javascript:

$(document).ready(function () {
$('#boxes_holder, #dragBox').sortable({
    connectWith: '.initBox',


    //Whenever Dropped Item
    receive: function (event, ui) {
        if ($(this).children().length > 4) {
            if ($(this).attr('id') == 'dragBox') {

                $(ui.sender).sortable('cancel');
            }
        }
    }
});
});

我在下面使用 PHP 的实际 HTML 代码(似乎不起作用):

<div id = "boxes_holder" class = "initBox">
<?php
//Creates 49 BOXES elements


    $x = 49;
    for($i=1; $i<=$x; $i++){
       echo '<li><span class = "boxes" style="text-align:center;float:left;margin:10px;" > '.$i.'</span></li>';
    }

?>

</div>

<div id="dragBox" class = "initBox">
<div id="dragBoxTitle" class = "">
    Pick Your Numbers:
</div>
</div>

Answer 1

以下将对放置后的元素进行排序。

    $('#boxes_holder, #dragBox').sortable({
        connectWith: '.initBox',


        //Whenever Dropped Item
        receive: function (event, ui) {
            $(this).find('div.boxes').sort(sortAlpha).appendTo(this);  
            if ($(this).children().length > 5) {
                if ($(this).attr('id') == 'dragBox') {
                    $(ui.sender).sortable('cancel');
                }
            }
        }
    });

    function sortAlpha(a,b){  
        return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
    }

检查 unfiddle。 http://jsfiddle.net/nsjithin/7yMSz/1/

编辑:因此需要在位置发生变化、排序或拖放时进行排序。你需要把它放在 update事件处理程序。

   $('#boxes_holder, #dragBox').sortable({
        connectWith: '.initBox',

        update: function( event, ui ) {
            $(this).find('div.boxes').sort(sortAlpha).appendTo(this);  
        },
        //Whenever Dropped Item
        receive: function (event, ui) {
            if ($(this).children().length > 4) {
                if ($(this).attr('id') == 'dragBox') {
                    $(ui.sender).sortable('cancel');
                }
            }
        }
    });

编辑 2:使用 <li> html结构。

$('#boxes_holder, #dragBox').sortable({
    connectWith: '.initBox',

    update: function( event, ui ) {
        $(this).find('li').sort(sortAlpha).appendTo(this);  
    },
    //Whenever Dropped Item
    receive: function (event, ui) {
        if ($(this).children().length > 4) {
            if ($(this).attr('id') == 'dragBox') {
                $(ui.sender).sortable('cancel');
            }
        }
    }
});

function sortAlpha(a,b){  
    return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;  
}

Jsfiddle:http://jsfiddle.net/nsjithin/7yMSz/3/