Table with Sortable Rows

======jQuery UI Sortable Widget====== * description : jQuery UI Sortable Widget * author : 오션 * email : shlim@repia.com * lastupdate : 2022-07-05 Tue \\ =====jQuery UI's sortable Interactioin===== \\





    
    
    
    
    
    
    Table with Sortable Rows
    


    
        
            
                ID
                Name
                Grade
            
        
        
            
                100
                Benjamin
                B
            
            
                101
                Abel
                A+
            
            
                102
                Aaron
                C
            
            
                103
                Sarah
                E
            
            
                104
                Hannah
                B+

ID	Name	Grade
100	Benjamin	B
101	Abel	A+
102	Aaron	C
103	Sarah	E
104	Hannah	B+

\\ {{:wiki:javascript:jquery:jquery_note:jquery_sortable.png?400|}}\\ \\





    
    
    
    Sortable demo
    
    
    


    
    
        Item 01
        Item 02
        Item 03
        Item 04
        Item 05

\\ ===== jQuery Sortable Widget ===== Description: Reorder elements in a list or grid using the mouse.\\ 마우스를 사용하여 리스트 또는 그리드 안의 요소를 재정렬합니다.\\ \\ The jQuery UI Sortable plugin makes selected elements sortable by draggging with the mouse.\\ jQuery UI Sortable 플러그인은 선택한 요소를 마우스로 드래그하여 정렬할 수 있도록 합니다.\\ \\ Note: In order to sort table rows, the ''**tbody**'' must be made sortable, not the ''**table**''.\\ 참고: 테이블 행을 정렬하려면, ''**table**''이 아니라 ''**tbody**''를 정렬 가능하게 만들어야 합니다.\\ \\ ====The source of this article==== [[https://www.youtube.com/watch?v=V1nYMDoSCXY|jQuery UI sortable Tutorial-Save Position With Ajax & PHP & MySQL]]\\ [[https://www.youtube.com/watch?v=9LloG9-NfOE|jQuery UI:Table with Sortable Rows using jQuery UI's sortable Interaction]]\\ [[https://api.jqueryui.com/sortable/|Sortable Widget]]\\ \\ {{tag>오션 jQuery UI Sortable Widget}}