드래그를 사용해 목록(li) 정렬 하기 - jquery-ui 사용

	
    <ul id="option_list" class="list" data-role="listview" data-inset="true">
    	<li class='row'>1</li>
        <li class='row'>2</li>
        <li class='row'>3</li>
    </ul>
    
    <script src="/plugins/jquery/jquery.min.js"></script>
    <script src="/assets/js/jquery-ui.min.js"></script>
    <script src="/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript">

        // html5 only.
        $('li').removeClass('ui-corner-bottom');
        $('ul')
            .addClass('ui-corner-top')
            .removeClass('ui-corner-all')
            .sortable({
                'containment': 'parent',
                'opacity': 0.6,
                update: function(event, ui) {
                    //alert("dropped");
                }
            });


        // html5 mobile able.
        $( "#option_list" ).sortable({
            items: "li:not(.ui-li-divider)"
            //items: ">li"
            ,scroll:false
            //,handle: ".icon01"
            //,appendTo: document.body
            //,cancel: "p,a,.use01,.use02"
            //items: "li img"
        });
        $( "#option_list" ).sortable();
        $( "#option_list" ).disableSelection();
        /*
        $( "#option_list" ).bind("sortstop", function(event, ui) {
            //alert("stop");
            //$('#option_list').listview('refresh');
        });
        */
    </script>

 

touch-punch.min.js 는 모바일을 지원하기 위해 필요함

jquery-ui.min.js

0.22MB

jquery.min.js

0.08MB

jquery.ui.touch-punch.min.js

0.00MB

 

 

 

참고 : sortablejs.github.io/Sortable/

SortableJS