Drag and drop issue table to table

Question

I am trying to create a feature that can drag table cell from 1 table to another table cell.

My request is when user drag the cell from table 1 to table 2. The table 1 cell will still have the same texts remaining in the cell. My codes can do that. However, when the user drag cells in table 2. I want the dragged cell text disappear.

For example

<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>

user can drag drag1 from table 1 to table 2 and drag1 still remain in 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>

but if user drag cell in table 2, drag1 will disappear and relocate to another cell

<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>

I can't change table classname nor giving a id. so it's a bit tough.

• Table 2 is droppable
• Table 1 is not droppable
• Table 1 source of element dropped to table 2 should stay in table 1 (copy to table 2)
• Table 2 source of element dragged within table 2 to new location should remove source from table 2 and relocate to new position in table 2 at the drop location

Here is my jsfiddle

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

Answer 1

Add a condition to check if the dragged cell is from table 2 and then clear its content

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

Updated fiddle