拖放表格行 (asp.net mvc)

Question

我需要一些帮助来将拖放功能集成到我的项目中。 我尝试了很多不同的方法，但一切都不成功。 我停止使用 jquery，但是我仍然有问题让它运行。 我将不胜感激任何帮助。

这是我的观点：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
    <style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

        #table-1 tr:hover {
    background-color:aqua;
    color:#fff;
}
</style>
</head>
<body>
    <div class="table-responsive">
    <table class="table" id="table-1" cellspacing="0" cellpadding="2">
        <thead>
            <tr>
                <th>ID</th>
                <th>Number</th>
                <th> Description</th>
            </tr>
        </thead>
            <tbody style="cursor:pointer;">
                <tr id="1"><td><div class="dragitem">1</div></td><td><div class="dragitem">One</div></td><td>some text</td></tr>
        <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
        <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
        <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
        <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
        <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
        </tbody>
    </table>
    </div>


</body>

</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("table-1").sortable();
    })
</script>

Answer 1

在您的代码中，您希望缩短整个table而不是tbody内的tr ，那么为什么您的代码会失败。 使用tbody选择器来缩短table行。

$("#table-1 tbody").sortable();

注意：您使用的是 id，所以不要忘记添加 #。

例子：

 $(document).ready(function() { $("#table-1 tbody").sortable(); })

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } #table-1 tr:hover { background-color: aqua; color: #fff; }

 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> <script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> <div class="table-responsive"> <table class="table" id="table-1" cellspacing="0" cellpadding="2"> <thead> <tr> <th>ID</th> <th>Number</th> <th> Description</th> </tr> </thead> <tbody style="cursor:pointer;"> <tr id="1"> <td> <div class="dragitem">1</div> </td> <td> <div class="dragitem">One</div> </td> <td>some text</td> </tr> <tr id="2"> <td>2</td> <td>Two</td> <td>some text</td> </tr> <tr id="3"> <td>3</td> <td>Three</td> <td>some text</td> </tr> <tr id="4"> <td>4</td> <td>Four</td> <td>some text</td> </tr> <tr id="5"> <td>5</td> <td>Five</td> <td>some text</td> </tr> <tr id="6"> <td>6</td> <td>Six</td> <td>some text</td> </tr> </tbody> </table> </div>

拖放表格行 (asp.net mvc)

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-16 09:24:14

拖放表格行 (asp.net mvc)

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-16 09:24:14

解决方案1
1 已采纳 2022-12-16 09:24:14