jQuery 可排序的 Div答案

【问题标题】：jQuery sortable Div'sjQuery 可排序的 Div
【发布时间】：2011-01-19 19:29:34
【问题描述】：

是否可以在两个或多个 div/box 之间直接排序并返回完整数据（var order = ...）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>

<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 10px;
}

ul {
    margin: 0;
}

#s1,#s2 {
    float: left;
    width: 400px;
}

#s1 li,#s2 li {
    list-style: none;
    margin: 0 0 4px 0;
    padding: 10px;
    background-color:#00CCCC;
    border: #CCCCCC solid 1px;
    color:#fff;
}

</style>

<script type="text/javascript">
$(document).ready(function(){ 

    $(function() {
        $("#s1 ul,#s2 ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
            var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
            //$.post("updateDB.php", order);
            alert(order);                                                            
        }                                 
        });
    });

}); 
</script>

</head>
<body>

    <div id="box">

        <div class="box" id="s1">
            <ul>
                <li id="recordsArray_1">1. Lorem ipsum dolor sit amet, consetetur</li>
                <li id="recordsArray_2">2. Lorem ipsum dolor sit amet, consetetur</li>
                <li id="recordsArray_3">3. Lorem ipsum dolor sit amet, consetetur</li>
                <li id="recordsArray_4">4. Lorem ipsum dolor sit amet, consetetur</li>
            </ul>
        </div>

        <div class="box" id="s2">
            <ul>
                <li id="recordsArray_5">5. Lorem ipsum dolor sit amet, consetetur</li>
                <li id="recordsArray_6">6. Lorem ipsum dolor sit amet, consetetur</li>
                <li id="recordsArray_7">7. Lorem ipsum dolor sit amet, consetetur</li>
                <li id="recordsArray_8">8. Lorem ipsum dolor sit amet, consetetur</li>
            </ul>
        </div>

    </div>

</body>
</html>

请注意，这与我的其他帖子不同 - 谢谢！

【问题讨论】：

我很困惑。您希望它做哪些它现在没有做的事情？
我可以将值 1-4 返回数据 (#s1) 和 5-8 (#s2) 但我将“合并”两个示例的数据：recordsArray_2recordsArray_7并获得完整的订单 1-8

标签： jquery jquery-ui jquery-ui-sortable jquery-tools

【解决方案1】：

查看我的 JSFiddle。

http://jsfiddle.net/PbDBU/1/

基本上，我将 2 个 DIV 合并为一个，将 LI 元素设置为 float 属性。然后，我只是像1,5,2,6,3,7,4,8 这样将结果交错而不是1,2,3,4,5,6,7,8

【讨论】：

首先感谢您的回答:) 但是如果不“删除”第二个 div/ul 就不可能吗？
坦率地说，我对图书馆不是很熟悉。只是表面上看，默认情况下我没有看到该选项可用。
是的，这完全没问题 :) 但也许其他人知道不同的方法或解决方案