我需要一些帮助，将拖放功能集成到我的项目中。我尝试了许多不同的方法，但都不成功。我停止使用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>
1条答案
按热度按时间xdyibdwo1#
在您的代码中，您希望短接整个
table，而不是tbody中的tr，因此您的代码失败。使用tbody选择器短接table行。注意：您使用的是id，所以不要忘记添加#。
示例：
x一个一个一个一个x一个一个二个一个x一个一个三个一个