1

テーブル セルを 1 つのテーブルから別のテーブル セルにドラッグできる機能を作成しようとしています。

table 1私の要求は、ユーザーがセルを からにドラッグしたときtable 2です。表 1 のセルには、同じテキストがセルに残っています。私のコードはそれを行うことができます。ただし、ユーザーが表2のセルをドラッグすると、ドラッグされたセルのテキストが消えます。

例えば

<table class='table'>
    <tr>
        <td>drag1</td>
        <td>drag2</td>
    </tr>
     <tr>
        <td>drag3</td>
        <td>drag4</td>
    </tr>
</table>
<br/>
<table class='table'>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

ユーザーはドラッグ 1 をテーブル 1 からテーブル 2 にドラッグできますが、ドラッグ 1 は引き続きテーブル 1 に残ります。

<table class='table'>
    <tr>
        <td>drag1</td>
        <td>drag2</td>
    </tr>
     <tr>
        <td>drag3</td>
        <td>drag4</td>
    </tr>
</table>
<br/>
<table class='table'>
    <tr>
        <td>drag1</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

ただし、ユーザーがテーブル 2 のセルをドラッグすると、drag1 が消えて別のセルに再配置されます

<table class='table'>
    <tr>
        <td>drag1</td>
        <td>drag2</td>
    </tr>
     <tr>
        <td>drag3</td>
        <td>drag4</td>
    </tr>
</table>
<br/>
<table class='table'>
    <tr>
        <td></td>
        <td>drag1</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

テーブルのクラス名を変更したり、ID を指定したりすることはできません。なのでちょっと辛いです。

  • 表 2 はドロップ可能です
  • 表 1 はドロップできません
  • テーブル 2 にドロップされた要素のテーブル 1 ソースは、テーブル 1 にとどまる必要があります (テーブル 2 にコピー)
  • テーブル 2 内で新しい場所にドラッグされた要素のテーブル 2 ソースは、テーブル 2 からソースを削除し、テーブル 2 内のドロップ場所の新しい位置に再配置する必要があります

これが私のjsfiddleです

http://jsfiddle.net/7Xd6n/6/

4

1 に答える 1

1

ドラッグされたセルがテーブル 2 からのものであるかどうかを確認する条件を追加し、その内容をクリアします

if(target.text().trim() === ""){
    targetText = target.text().trim();
    dragText = drag.text().trim();
    target.html(dragText);
    if(drag.closest('table').is('table:eq(1)'))
        drag.html('&nbsp;');  
}

更新されたフィドル

于 2013-08-06T23:50:36.053 に答える