Question

我正在尝试创建一个可以将表格单元格从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/

Answer 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;');  
}

<强> Updated fiddle

将问题表拖放到表中

1 个答案: