daniel Crabbe daniel Crabbe - 5 months ago 21
Javascript Question

sortable lists, with sortable lists

i'm trying to have 3 levels of lists all of which are sortable & draggable into each other. Basically trying to set up an easy way to manage navigation menus with multiple levels.

Its 90% there but for some reason it wont save an item into a child list. It just seems to get the parent id of the list it came from?!


  • ie. a pink item into the 3rd(blue)
    level in the same green section.



However i can add an item to the same level list it cam from or to its parent.

a blue item can go to another blue item list or to the pink level?! AANd i've just noticed it does work if you drage a pink item into a pink section frm a different green section..!

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

any help appreciated! 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>");


};

Answer

this seems to work!

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


};
Comments