Home/ Questions/Q 6066801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:32:21+00:00

I have made this example code to illustrate my problem: <html xmlns=http://www.w3.org/1999/xhtml> <head runat=server>

  • 0

I have made this example code to illustrate my problem:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>

        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

        <script language="javascript">
                function InitSortable() {
                    $('.sortable').sortable();
                }    
        </script>

        <style>           
            .sortable { width: 200px; padding: 10px; border: solid 1px black; } 
            .sortable div { float: left; width: 80px; border: solid 1px black; margin-left: 4px; margin-bottom: 4px; background-color: White; padding: 2px; } 
        </style>    
    </head>
    <body onload="InitSortable()">            
        <div class="sortable">   
            <div>Process A</div>
            <div>Process B</div>
            <div>Process C</div>

            <div>File A</div>
            <div>File B</div>
            <div>File C</div>   
        </div>            
    </body>
</html>

I want to be able to sort Process A, ProcessB and Process C without messing up the sort on File A, File B and File C. And I want it to work in opposite way if I try to sort any of the File elements.

I have tried to put those 2 lists in their own div, but that breakes the design, all elements should float to left.

I have also played around with the items option in jquery, but I only manage to get one of the lists work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You will need to initialize/destroy the sortable each time you want to do some sorting, and each time you will initialize it you will do for the type of elements you want..

    So, add a different class to each type of elements you want grouped..

        <div class="sortable">
        <div class="process">Process A</div>
        <div class="process">Process B</div>
        <div class="process">Process C</div>

        <div class="file">File A</div>
        <div class="file">File B</div>
        <div class="file">File C</div>   
    </div>

    And in your script use

    function InitSortable() {
    $('.sortable > div').mousedown(function(){
        $(this).closest('.sortable').sortable({
            items:'.'+this.className,
            stop:function(){
                $(this).sortable('destroy');
            }
        });
    });
}  

$(InitSortable);

    Demo at http://jsfiddle.net/gaby/h6aPj/

    • 0