当前位置：文江博客话题详情

使用 jQueryUI 在表中拖放一行

发布于 2024-11-06 16:58:00 字数 345 浏览 3 评论 0原文

我是 Javascript、jQuery 和所有客户端内容的新手。

我试图在同一个表中拖放一个“表行”（每行都有一个标签和 2 个复选框）。我正在使用 jQueryUI 的可拖放功能。我遇到的问题是：

例如。当我单击/拖动第 1 行到第 3 行时，第 1 行（在一个中处理的所有元素）将在任何的中设置我要拖动到的给定行。
拖动的行应从拖动的位置删除。

我已在此处添加了链接。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡淡的优雅 2024-11-13 16:58:00

您需要做的一些事情：

不需要可拖动（除非我误读了您想要做的事情）。您所需要的只是在您想要可排序的 tr 周围添加一个 tbody 标记，如下所示：

<table width="350px" id="regFields">
    <thead>            
        <tr id="rowHeader">
            <th align="left" colspan="1">Field Name</th>
            <th align="center" colspan="1">Include</th>
            <th colspan="1"><ul>Required</ul></th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td align="left" colspan="1">First Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Last Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Company</td>
            <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Email</td>
            <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
         </tr>
    </tbody>
</table>

另外，请注意您不希望有多个同名的 id。相反，你会想要上课。我没有费心在这里解决这个问题，但你会想要这样做。

jQuery 实际上非常简单：

$('#regFields tbody').sortable({
    items: 'tr'
});

我选择表和 tbody 元素（所以我没有得到标题）。 Sortable 会自动完成剩下的工作（可能甚至不需要 items 选项，但这并没有什么坏处）。

希望这有帮助！

火腿

A few things you'll want to do:

The draggable isn't needed (unless I misread what you're trying to do). All you need is to add a tbody tag around the tr's that you want to have sortable, like this:

<table width="350px" id="regFields">
    <thead>            
        <tr id="rowHeader">
            <th align="left" colspan="1">Field Name</th>
            <th align="center" colspan="1">Include</th>
            <th colspan="1"><ul>Required</ul></th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td align="left" colspan="1">First Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Last Name</td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Company</td>
            <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
        </tr>
        <tr id="row">
            <td align="left" colspan="1">Email</td>
            <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
            <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
         </tr>
    </tbody>
</table>

Also, note that you don't want to have multiple ids with the same name. Instead, you'll want classes. I didn't bother fixing that here but you'll want to do that.

The jQuery is actually pretty simple:

$('#regFields tbody').sortable({
    items: 'tr'
});

I'm selecting the table and the tbody element (so I don't get the header). Sortable automatically does the rest (probably don't even need the items option, but it doesn't hurt).

Hope this helps!

Jamon

回复收藏 0 原文

梦行七里 2024-11-13 16:58:00

尝试使用可排序而不是可拖动

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
</head>
<body>
<div id="leftHalfContainer" style="display: block; float: left;">     
    <form name="setupRegForm" id="setupRegForm" method="post">                                            
    <table width="350px" id="regFields">
        <thead>            
            <tr id="rowHeader">
                <th align="left" colspan="1">Field Name</th>
                <th align="center" colspan="1">Include</th>
                <th colspan="1"><ul>Required</ul></th>
            </tr>
        </thead>
            <tr id="row">
                <td align="left" colspan="1">First Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Last Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Company</td>
                <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Email</td>
                <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
             </tr>
    </table>
    </form>                     
</div><script>
    $("table").sortable({
            items: 'tr'
    });   
</script>
</body>
</html>

Try using sortable instead of draggable

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
</head>
<body>
<div id="leftHalfContainer" style="display: block; float: left;">     
    <form name="setupRegForm" id="setupRegForm" method="post">                                            
    <table width="350px" id="regFields">
        <thead>            
            <tr id="rowHeader">
                <th align="left" colspan="1">Field Name</th>
                <th align="center" colspan="1">Include</th>
                <th colspan="1"><ul>Required</ul></th>
            </tr>
        </thead>
            <tr id="row">
                <td align="left" colspan="1">First Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameInclude" name="firstNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="firstNameRespReq" name="firstNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Last Name</td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameInclude" name="lastNameInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="lastNameRespReq" name="lastNameRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Company</td>
                <td align="center" colspan="1"><input type="checkbox" id="companyInclude" name="companyInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="companyRespReq" name="companyRespReq"></input></td>
            </tr>
            <tr id="row">
                <td align="left" colspan="1">Email</td>
                <td align="center" colspan="1"><input type="checkbox" id="emailInclude" name="emailInclude"></input></td>
                <td align="center" colspan="1"><input type="checkbox" id="emailRespReq" name="emailRespReq"></input></td>
             </tr>
    </table>
    </form>                     
</div><script>
    $("table").sortable({
            items: 'tr'
    });   
</script>
</body>
</html>

回复收藏 0 原文

~没有更多了~