可排序列表，带有可排序列表答案

【问题标题】：sortable lists, with sortable lists可排序列表，带有可排序列表
【发布时间】：2011-01-08 04:24:55
【问题描述】：

我正在尝试创建 3 个级别的列表，所有这些列表都是可排序和可相互拖动的。基本上试图建立一种简单的方法来管理具有多个级别的导航菜单。

它的 90% 在那里，但由于某种原因，它不会将项目保存到子列表中。它似乎只是获取了它来自的列表的父 ID？！

即。粉红色的物品进入第三（蓝色）同一绿色部分中的级别。

但是我可以将一个项目添加到它从或到其父级的同一级别列表中。

一个蓝色项目可以转到另一个蓝色项目列表或粉红色级别？！ AAN而且我刚刚注意到，如果您将粉红色项目从另一个绿色部分拖到粉红色部分中，它确实有效..！

http://oursite.modernactivity.co.uk/youradmin/indexNEW.php

任何帮助表示赞赏！直流。

$(function() {

    $("div.sortable").each(function(i){
        makeSortable("#"+$(this).attr("id"));   
        //$("#fdbk").append("<li>"+$(this).attr("id")+" </li>");

    });

});

function makeSortable(id) {

    $(id).sortable({
        connectWith: 'div.sortable',
        opacity: 0.9,
        distance: 15,
        placeholder: 'placeholder',
        helper:'clone',
        update : function(e, ui){
            serialize(id,'update');
            //$("#fdbk").append("<li>update from:"+$(id).attr("id")+" i am:"+$(id).attr("id")+"  </li>");
        },
        /*receive : function(e, ui){
            serialize(id,'receive');
            //$("#fdbk").append("<li>SORT from:"+$(id).attr("id")+" i am:"+$(id).attr("id")+ " i am:"+$(this).attr("id")+"  </li>");
        },
        sort : function(e, ui){
            serialize(id,'sort');
            //$("#fdbk").append("<li>SORT from:"+$(id).attr("id")+" i am:"+$(id).attr("id")+ " i am:"+$(this).attr("id")+"  </li>");
        }*/
    });

};  

function serialize(s,e) {
    var sortableLinks = $(s); 
    var parentID = sortableLinks.attr("name");
    $(sortableLinks).sortable();
    var data = $(s).sortable('serialize');

    $.ajax({
        url: "/youradmin/scripts/php/process.php",
        type: "POST",
        data: data+"&parentID="+parentID+"&reorderContent=1"            
    });
    $("#fdbk").html("");
    $("#fdbk").prepend("<li>event:"+e+"; idArray:"+data+" parent:<b>"+parentID+"</b> </li>");


};

【问题讨论】：

标签： jquery jquery-ui serialization jquery-ui-sortable

【解决方案1】：

这似乎行得通！

$(function() {

    $("div.sortable").each(function(i){
        makeSortable("#"+$(this).attr("id"));   

    });


});

function makeSortable(id) {

    $(id).sortable({
        connectWith: 'div.sortable',
        opacity: 0.9,
        distance: 15,
        placeholder: 'placeholder',
        helper:'clone',
        cursor: 'move', 
        update : function(e,ui){
            //serialize(id,e,ui);
        },

        receive:function(e,ui){
            serialize(id,e,ui);
        }
        ,
        sort : function(e, ui){
            //serialize(id,e,ui);
        },
        stop : function(e, ui){
            serializeOnStop(id,e,ui);
        }
    }).disableSelection();

};  

function serialize(s,e,ui) {
    var sortableLinks = $(s); 
    var parentID = sortableLinks.attr("name");
    $(sortableLinks).sortable();
    var data = $(s).sortable('serialize');

    $.ajax({
        url: "/youradmin/scripts/php/process.php",
        type: "POST",
        data: data+"&parentID="+parentID+"&reorderContent=1"            
    });

    $("#fdbk").prepend("<li>event:"+e.type +" data:"+data+" parentID:"+parentID+" s;"+sortableLinks.attr("id")+" </li>");

};

function serializeOnStop(s,e,ui) {
    var item = ui.item;
    var newParent = $("#"+item.attr('id')).parent('div');

    var sortableLinks = $(s); 
    var parentID = newParent.attr("id").split("_");
    $(newParent).sortable();
    var data = $(newParent).sortable('serialize');

    $.ajax({
        url: "/youradmin/scripts/php/process.php",
        type: "POST",
        data: data+"&parentID="+parentID[1]+"&reorderContent=1"            
    });

    $("#fdbk").prepend("<li>event:"+e.type +" data:"+data+" parentID:"+parentID[1]+" s;"+sortableLinks.attr("id")+" newParent:"+newParent+"  </li>");


};

【讨论】：

【解决方案2】：

它搞砸了，因为你对所有东西都使用同一个类，它不会看它是孩子还是父母或什么，它只会看到你是否将 3 级项目拖到 1 级列表中，即类是同样，它应该能够将该项目拖到该列表中。编辑：我使用了您网站上的源代码：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">     
    $(document).ready(function(){
        $('.level-1, .level-2, .level-3').sortable({
            update: function(e, ui) {
                update(ui.item);
            }
        });
    });  
    var id_prefix = "id_";
    function update(item) {         
        var parentID = $(item).parent().attr('id');
        var order = $('#'+parentID).sortable('serialize');
        parentID = parentID.substring(id_prefix.length);
    }
</script>
    <style type="text/css">
        .level-2 {background-color: lime;}
        .level-3 {background-color: #ff6fcf;}
        .level-4 {background-color: #6FF;}
        div {margin: 5px 0; min-height: 5px; padding: 10px;}
    </style>

</head>
<body>
<div id="id_master" class="level-1 list"> 
<div id="id_1017" class="level-2 list">x 1017</div> 
<div id="id_1020" class="level-2 list">y 1020   
        <div id="id_1041" class="level-3 list"> z 1041
            <div id="id_1030" class="level-4">i 1030</div> 
            <div id="id_1021" class="level-4">z 1021</div> 
            <div id="id_1032" class="level-4">iii 1032</div> 
        </div>      
        <div id="id_1018" class="level-3 list"> 1 1018  
            <div id="id_1029" class="level-4">2 1029</div> 
            <div id="id_1022" class="level-4">1 1022</div> 
        </div>  
</div>
<div id="id_1042" class="level-2 list">z 1042   
    <div id="id_1033" class="level-3 list"> iv 1033</div>       
</div>

你的 php 代码应该看起来像这样

<div id="id_0" class="level-1">
    <?
        $level1 = $select->getContentAssoc("","AND content.contentType='mainsection'",""); 
        foreach($level1 as $row1){
    ?>
    <div id="id_<?=$row1['contentAssocID']?>"  class="level-2"><?=$row1['title']?>
        <?
            $level2 = $select->getContentAssoc($row1['contentAssocID'],"AND content.contentType='mainsection'",""); 
            foreach($level2 as $row2){
        ?>
        <div id="id_<?=$row2['contentAssocID']?>" class="level-3"> <?=$row2['title']?> <?=$row2['contentAssocID']?>
                    <?
                        $level3 = $select->getContentAssoc($row2['contentAssocID'],"AND content.contentType='mainsection'",""); 
                        foreach($level3 as $row3){
                    ?>
                        <div id="id_<?=$row3['contentAssocID']?>" class="level-4"><?=$row3['title']?> <?=$row3['contentAssocID']?></div>
                    <? } ?>
        </div>
        <? } ?>
    </div>
<? } ?>

请注意，我删除了名称属性，如果名称在 id 中，您需要它们做什么？

【讨论】：

不完全一样； $("div.sortable").each(function(i){ makeSortable("#"+$(this).attr("id")); //$("#fdbk").append("
"+$(this).attr("id")+"

重点是你需要通过使用唯一标识符来进行不同级别的排序，如果你可以通过 db-input 编写唯一列表项，你应该能够使用它们的项目编写唯一列表db-input，你能举一个你从数据库中提取的数据的例子吗？

不知何故，如果没有任何其他 cmets，我似乎无法添加 cmets，所以我希望您不要忽视我编辑的答案