jquery - Jquery - Hide some content of 'draggable' div but use it on 'drop' event

Question

I have two div on my page. One is draggable and other is droppable.

Draggable div:

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

Droppable div

<div id='drop'>

</div>

I am using following jQuery code to append the contents of div 'drag' to div 'drop' on drop event of draggable div.

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

Now what I want to do is , I don't want to show the contents of div 'two'(which is inside div 'drag') to the user. But still when a user drops the div 'drag' on div 'drop' , the content of both div 'one' and 'two' should get appended to div 'drop'.

So the user should see the content of div 'drag' as:(div 'two' is hidden)

111111

But after drop of div 'drag', the content of div 'drop' should be:

111111
222222

Please guide me how to hide the content of div 'one' from user, but still use it on drop event.

Answer 1

Slight changes in the markup and js script as follows

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

​</p>

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

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

Answer 2

You can use the dragstop event exposed by the draggable function in combination with bind to achieve the functionality you want.

Example:

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