Question

我正在尝试拥有3个级别的列表，所有这些列表都是可排序的＆amp;可以互相拖延。基本上尝试设置一种简单的方法来管理多个级别的导航菜单。

它有90％但由于某种原因它不会将项目保存到子列表中。它似乎只是得到它来自的列表的父ID？！

即。一个粉红色的项目进入第3（蓝色）同一绿色部分的水平。

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

蓝色项目可以转到另一个蓝色项目列表还是粉红色级别？！ AANd我刚刚注意到，如果你将一个粉红色的物品从一个不同的绿色区域中扯成粉红色的部分，它确实有效..！

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>");


};

Answer 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>");


};

Answer 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中，您需要它们是什么？

Answer 3

欢呼cornelis ......

每个项目，无论是子级还是父级都从db获取其唯一ID;

<div id="master" name="0" class="sortable">

<?
$level1 = $select->getContentAssoc("","AND content.contentType='mainsection'",""); 
foreach($level1 as $row1){
?>

    <div name="<?=$row1['contentAssocID']?>" id="id_<?=$row1['contentAssocID']?>"  class="sortable"><?=$row1['title']?>

            <?
            $level2 = $select->getContentAssoc($row1['contentAssocID'],"AND content.contentType='mainsection'",""); 
            foreach($level2 as $row2){
            ?>

            <div name="<?=$row2['contentAssocID']?>" id="id_<?=$row2['contentAssocID']?>" class="sortable"> <?=$row2['title']?> <?=$row2['contentAssocID']?>


                        <?
                        $level3 = $select->getContentAssoc($row2['contentAssocID'],"AND content.contentType='mainsection'",""); 
                        foreach($level3 as $row3){
                        ?>

                            <div id="id_<?=$row3['contentAssocID']?>"><?=$row3['title']?> <?=$row3['contentAssocID']?></div>


                        <? } ?>


            </div>

            <? } ?>

    </div>

<?
}
?>

有点以为我只需要能够在其丢弃时获取某些内容的ID，然后在其父级上调用serialise（）？

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

3 个答案: