Question

我的页面上有两个div。一个是可拖动，另一个是可投放。

Draggable div：

<div id='drag'>
    <div id='one'>11111</div>
    <div id='two'>22222</div>
<div>

Droppable div

<div id='drop'>

</div>

我正在使用以下jQuery代码将div'拖动'的内容附加到div' drop '上，可拖动div的drop事件。

$(function() {
        $( "#drag" ).draggable();
        $( "#drop" ).droppable({
            drop: function( event, ui ) {
                $( this ).append( ui.draggable.html();
            }
        });
    });

现在我要做的是，我不想显示div'两个'（在div'拖动'中）的内容到用户。但是当用户在div' drop '上删除div'拖动'时，div' one '和''附加到div' drop '。

所以用户应该看到div'拖'的内容为：（div'两个'隐藏）

但

在删除div'拖'之后，div'drop'的内容应：

111111
222222

请指导我如何向用户隐藏div' one '的内容，但仍会在drop事件中使用它。

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

标记和js脚本略有变化，如下所示

<div id='drag' style="border:solid 1px blue;height:50px;">
    <div id='one'  >11111</div>
    <div id='two' ><span style="visibility:hidden;">22222</span></div>
</div>


<div id='drop' style="border:solid 1px red;height:50px;">

</div>

$(document).ready(function() {
    $("#drag").draggable();

    $("#drop").droppable({
        drop: function(event, ui) {
            $(this).append(ui.draggable.text());
        }
    });
});

Answer 2

您可以将draggable函数公开的dragstop事件与bind结合使用，以实现您想要的功能。

示例：

$( "#drag" ).bind( "dragstop", function(event, ui) { $( this ).append( ui.draggable.html()); });

Jquery - 隐藏'draggable'div的一些内容，但在'drop'事件中使用它

2 个答案: