I need some help with integrating drag and drop functionality into my project. I tried many different ways, but everything is unsuccessful. I stopped on using jquery, however I still have the issue make it running. I will highly appreciate any help.
Here is my view:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<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 >1</div></td><td><div >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>
CodePudding user response:
In your code you want to short whole table
not tr
inside tbody
, so why your code is fail. Use tbody
selector to short table
row.
$("#table-1 tbody").sortable();
Note: You are using id so don't forget to add # .
Example:
$(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/[email protected]/dist/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
<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 >1</div>
</td>
<td>
<div >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>