목차

jQuery UI Sortable Widget

  • description : jQuery UI Sortable Widget
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2022-07-05 Tue


jQuery UI's sortable Interactioin


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <title>Table with Sortable Rows</title>
    <style>
        table {
            margin:30px auto;
        }
        td, th {
            border: 1px solid slateblue;
            padding: 5px;
        }
        tr {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td>Benjamin</td>
                <td>B</td>
            </tr>
            <tr>
                <td>101</td>
                <td>Abel</td>
                <td>A+</td>
            </tr>
            <tr>
                <td>102</td>
                <td>Aaron</td>
                <td>C</td>
            </tr>
            <tr>
                <td>103</td>
                <td>Sarah</td>
                <td>E</td>
            </tr>
            <tr>
                <td>104</td>
                <td>Hannah</td>
                <td>B+</td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function() {
            $("table tbody").sortable( {
                helper:function(e, row) {
                    var originalCells = row.children();
                    var cloneRow = row.clone();
                    cloneRow.children().each(function(index){
                        $(this).width(originalCells.eq(index).width());
                    })
                    return cloneRow; 
                }
            });
        })
    </script>
</body>
</html>




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sortable demo</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
    <ul id="sortable">
        <li>Item 01</li>
        <li>Item 02</li>
        <li>Item 03</li>
        <li>Item 04</li>
        <li>Item 05</li>
    </ul>
 
    <script>
        $("#sortable").sortable();
    </script>
</body>
</html>


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

jQuery UI sortable Tutorial-Save Position With Ajax & PHP & MySQL
jQuery UI:Table with Sortable Rows using jQuery UI's sortable Interaction
Sortable Widget

, , , ,