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>

用户可以将drag1从表1拖到表2，并且drag1仍然保留在table1中

<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 不可丢弃
  • 表 1 删除到表 2 的元素来源应保留在表 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 回答