Question

我是Javascript，jQuery的新手，所有客户端的东西。

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

例如。当我单击/拖动第1行到第3行时，第1行（所有元素在一个<td>中嘎吱嘎嘎地）被设置在我拖动到的任何给定行的<td>中。
拖动的行应该从拖动的位置移除。

我已添加了链接here。

Answer 1

您想要做的一些事情：

不需要拖拽（除非我误读了你想要做的事）。您所需要的只是在想要排序的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元素（所以我没有得到标题）。其余的可自动排序（可能甚至不需要项目选项，但它不会受到伤害）。

希望这有帮助！

火腿

Answer 2

尝试使用sortable而不是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>

Drag And;使用jQuery在表中删除一行

2 个答案: