Drag and drop Menu using Tool-man+php

Drag  and drop Menu using Tool-man+php



1) Download tool-man new version(http://tool-man.org)



2) Edit tool-man\source\org\tool-man\core.js

     modify function inspectListOrder in ToolMan._junkdrawer

   



inspectListOrder_ret : function(id) {

        return(ToolMan.junkdrawer().serializeList(document.getElementById(id)))

    },



3)Modify sorting.html





<link rel="stylesheet" type="text/css" href="../../tool-man/examples/common/common.css"/>

<link rel="stylesheet" type="text/css" href="../../tool-man/examples/common/lists.css"/>

<style type="text/css"><!--

    ul.boxy li { margin: 0px; }

    #phonetics td {

        margin: 0px;

        padding: 0px 1em;

        vertical-align: top;

        width: 100px;

    }

   

   

   

   

    //-->

</style>



<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/core.js"></script>

<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/events.js"></script>

<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/css.js"></script>

<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/coordinates.js"></script>

<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/drag.js"></script>

<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/dragsort.js"></script>

<script language="JavaScript" type="text/javascript" src="../../tool-man/source/org/tool-man/cookies.js"></script>



<script language="JavaScript" type="text/javascript"><!--

    var dragsort = ToolMan.dragsort()

    var junkdrawer = ToolMan.junkdrawer()



    window.onload = function() {

        junkdrawer.restoreListOrder("numeric")

        junkdrawer.restoreListOrder("phonetic1")

        junkdrawer.restoreListOrder("phonetic2")

        junkdrawer.restoreListOrder("phonetic3")

       

        dragsort.makeListSortable(document.getElementById("numeric"),

                verticalOnly, saveOrder)



        dragsort.makeListSortable(document.getElementById("phonetic1"),

                verticalOnly, saveOrder)

        dragsort.makeListSortable(document.getElementById("phonetic2"),

                verticalOnly, saveOrder)

        dragsort.makeListSortable(document.getElementById("phonetic3"),

                verticalOnly, saveOrder)

    }



    function verticalOnly(item) {

        item.toolManDragGroup.verticalOnly()

    }



    function speak(id, what) {

        var element = document.getElementById(id);

        element.innerHTML = 'Clicked ' + what;

    }



    function saveOrder(item) {

        var group = item.toolManDragGroup

        var list = group.element.parentNode

        var id = list.getAttribute("id")

        if (id == null) return

        group.register('dragend', function() {

            ToolMan.cookies().set("list-" + id,

                    junkdrawer.serializeList(list), 365)

        })

    }



    //-->

</script>



4) write the code for list menu item



<ul id="numeric">

    </ul>



<?

$sql_t="SELECT *  FROM  $table_t

WHERE `position` = 'right' order by `order`";

$rest=$db->query($sql_t);

?>

<table id="phonetics">

    <tr>

        <td>

            <ul id="phonetic1" class="boxy">

  <?         

            while($arr=$db->fetch_array($rest))

            {

    ?>       

    <li id="<?=$arr[id]?>"><div align="right"><?= $arr[name]?></div></li>';

                   

<?   

                        }

?>           

   </ul>        

           

<form method="post" action="menu_save.php" name="save_form">

<input type="hidden" name="ord" id="ord" />

<input type="hidden" name="action" value="menu_order"/>

<input type="button" value="íÑÓá" onClick="javascript:save_menu()" />

</form>

5)write save menu  function

      <script language="javascript" type="text/javascript">

function save_menu()

{

var sd=junkdrawer.inspectListOrder_ret('phonetic1');

//alert(sd);

var control = document.getElementById("ord");

control.value=sd;

//document.save_form.action="http://localhost/search.php?s="+sd.toString();

document.save_form.submit();



}

</script>

6)Process/ save the manu in php

$ord=explode("|",$_POST["ord"]);

        foreach($ord as $key=>$value)

                { $sql="UPDATE $table SET `order`=".($key+1)." where id=".$value;

                  $result=$db->query($sql);

                }