Drag and Drop table rows (asp.net mvc)

Question

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 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>

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Dec 16, 2022 at 2:22

4b0 · Accepted Answer · 2022-12-16 09:24:14Z

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 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>

Collectives™ on Stack Overflow

Drag and Drop table rows (asp.net mvc)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related