сортируемые списки, с сортируемыми списками - PullRequest
Новая
       30

сортируемые списки, с сортируемыми списками

1 голос
/ 22 января 2010

Я пытаюсь создать 3 уровня списков, каждый из которых можно сортировать и перетаскивать друг в друга. В основном, пытаясь настроить простой способ управления навигационными меню с несколькими уровнями.

Там 90%, но по какой-то причине он не сохранит элемент в дочернем списке. Кажется, он просто получил родительский идентификатор списка, из которого он пришел?!

  • т. розовый предмет в 3-й (синий) уровень в том же зеленом разделе.

Однако я могу добавить элемент в тот же список уровней, с которого он кулачает или к его родителю.

синий предмет может перейти в другой список синих предметов или на розовый уровень ?! И я только что заметил, что это работает, если вы перетащите розовый предмет в розовую секцию из другой зеленой секции ..!

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

любая помощь приветствуется! Dc. 

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


};

Ответы [ 3 ]

1 голос
/ 27 января 2010

это похоже на работу! 

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


};
0 голосов
/ 22 января 2010

ура корнелис ...

каждый элемент, независимо от того, получает ли ребенок или родительский уникальный идентификатор из БД; 

<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 () для его родителя?

0 голосов
/ 22 января 2010

Плохо, потому что вы используете один и тот же класс для всего, он не смотрит, является ли он дочерним или родительским или чем, он видит только, если вы перетащите элемент уровня 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>
<? } ?>

Обратите внимание, что я удалил атрибуты имени, для чего они вам нужны, если имя указано в идентификаторе?

...