Question

我在javascript中有一些关于拖放的问题。

我有2个表 - 表1和表2.我有表1中每个单元格中每个员工的详细信息。每个单元格中只能看到Employee图像。其余的细节都是隐藏的。

表1的每个单元格都是可拖动的，可以放到表2中。

当我从表1中拖出特定单元格并将其放到表2时，特定员工的隐藏详细信息应显示在表2中。

包括图像，特定单元格的隐藏细节应在表2中删除后显示在表2中。

我可以将内容从一个表拖到另一个表中。并且无法在另一个表中显示隐藏的详细信息。

Answer 1

这是你在看什么？

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

你的主要变化是小提琴：

           target.children('h2').show();

Answer 2

演示FIDDLE

<强> HTML

     Table1
<table border="1" cellpadding="0">
    <thead>
         <td class="hiddenTD">Demo Name</td>
        <td class="hiddenTD">Demo Description</td>
        <td>Picture</td>
    </thead>
    <tr class="drag">
        <td class="hiddenTD">Demo1</td>
        <td class="hiddenTD">DemoDescription</td>
        <td><img src="" alt="Demo Picture"/></td>
    </tr>
     <tr class="drag">
        <td class="hiddenTD">Demo2</td>
        <td class="hiddenTD">DemoDescription</td>
        <td><img src="" alt="Demo2 Picture"/></td>
    </tr>
     <tr class="drag">
        <td class="hiddenTD">Demo3</td>
        <td class="hiddenTD">DemoDescription</td>
        <td><img src="" alt="Demo3 Picture"/></td>
    </tr>
</table>
<br/>
Table2
<table id="droppable" border="1" cellpadding="0">
        <thead>
         <td>Demo Name</td>
        <td >Demo Description</td>
        <td>Picture</td>
    </thead>

</table>

<强> CSS

    .hiddenTD
{
    display:none;
}

thead td{
    background-color:red;
}

<强> Jquery的

       $(document).ready(function(){
     $( ".drag" ).draggable();
    $( "#droppable" ).droppable({
    drop: function( event, ui ) {
        var $tr=$('<tr/>');
        $tr.html(ui.draggable.html());
        $tr.find('td').removeClass('hiddenTD');
        $(this).append($tr);
    }
    });
});

JavaScript拖放。在放弃之后取消隐藏细节

2 个答案: