0

私はJavascript、jQuery、すべてのクライアント関連の初心者です。

同じテーブル内で「テーブル行」(各行にはラベルと 2 つのチェックボックスがあります) をドラッグ アンド ドロップしようとしています。jQueryUI のドラッグ可能およびドロップ可能を使用しています。私が抱えている問題は次のとおりです。

  1. たとえば。行 1 をクリックして行 3 にドラッグすると、行 1 (すべての要素が 1 つにまとめられたもの<td>) が<td>ドラッグ先の任意の行に設定されます。

  2. ドラッグされた行は、ドラッグされた場所から削除する必要があります。

ここにリンクを含めました。

4

2 に答える 2

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 要素を選択しています (そのため、ヘッダーは取得されません)。Sortable が残りの処理を自動的に行います (おそらく items オプションは必要ありませんが、害はありません)。

お役に立てれば！

ハモン

于 2011-05-13T06:56:42.233 に答える
0

ドラッグ可能ではなくソート可能を使用してみてください

<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>
于 2011-05-13T17:10:09.680 に答える