문서의 이전 판입니다!

jQuery UI Sortable Widget

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

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>

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

오션, jQuery, UI, Sortable, Widget

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

jQuery UI Sortable Widget

jQuery UI's sortable Interactioin

The source of this article

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

jQuery UI Sortable Widget

jQuery UI's sortable Interactioin

The source of this article

문서 도구