如何在该表中限制行的拖放

时间:2016-11-20 06:38:43

标签: javascript jquery html

当你拖放一行时我遇到了问题......它正在从表中出来而不是在那个表中..如何使它在那个表中拖放...任何人都可以帮助我

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});

$('#sortFixed tbody').sortable().disableSelection();
<table style="border:1px solid black;" id="sortFixed" class="grid">
    <caption>Kurt Vonnegut novels</caption>
    <thead >
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:0)

尝试将id =“sortFixed”放入tbody中。它对我有用。

  <script>
    $( function() {
    $( "#sortFixed" ).sortable();
    $( "#sortFixed" ).disableSelection();
  } );
  </script>

 <table style="border:1px solid black;" id="oldSortFixed" class="grid">
    <caption>Kurt Vonnegut novels</caption>
    <thead >
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody id="sortFixed">
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

这是一个html工作文件:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $( function() {
    $( "#sortFixed" ).sortable();
    $( "#sortFixed" ).disableSelection();
  } );
  </script>
</head>
<body>

 <table style="border:1px solid black;" id="oldSortFixed" class="grid">
    <caption>Kurt Vonnegut novels</caption>
    <thead >
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody id="sortFixed">
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

</body>
</html>