How to make Unordered List dragable with multiple rows as below (using ul-li)

Below code is for splitting listitems into rows....how that can be dragable and sortable

```
    <script type="text/javascript">
        debugger;
        jQuery(function ($) {
            var size = 5,//Change number for the rows you want to display
          $ul = $("ul"),
          $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
          loop = Math.ceil($lis.length / size),
          i = 0;

            $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

            for (; i < loop; i = i + 1) {
                $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + 5)).insertAfter($ul); ////Change number for the rows you want to display
            }
        });

    </script>

<div>
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
<li>12</li>
    </ul>
</div>

```

Above code is for splitting listitems into rows....how that can be dragable and sortable