CODEWITHSUNDEEP
javascriptjqueryjquery-uidrag-and-drop
user1027167
user1027167

Reputation: 4458

drag and drop with jQuery

what is the problem with the following code?

see here: http://jsfiddle.net/xKcAu/

JS:

$(document).ready( function() {

    $('#diag1').draggable();
    $('#diag1').css('background-color', '#f4f');
    $('#diag1').width('100px');
    $('#diag1').height('50px');

    $('#cnt1').css('background-color', '#4ff');
    $('#cnt1').width('300px');
    $('#cnt1').height('300px');

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

});

HTML:

<div id="cnt1">ddd</div>
<div id="diag1">Dialog 1</div>

If I drop the smaller div on the bigger one it hides away. Why?

Upvotes: 0

Views: 266

Answers (4)

flextek
flextek

Reputation: 11

if all you want to do is keep the draggable in view, then just remove the following 

$(this).append(ui.draggable);

as mentioned the append and positioning is causing the issue.

Upvotes: 0

Rizwan Mumtaz
Rizwan Mumtaz

Reputation: 3965

#​diag1{
    position:absolute;
}

or add

$('#diag1').css('position', 'absolute');

I am not 100% sure , is this what you are looking for ?

http://jsfiddle.net

Upvotes: 1

IOrlandoni
IOrlandoni

Reputation: 1828

It doesn't dissapear. It is appended to where you dropped, but it keeps the old position values and ends offscreen. You should try using position: absolute on diag1, so the droppable doesn't use position: relative. Now the position coordinates are always going to be measured against the top left of the document, instead of the container.

Upvotes: 1

j08691
j08691

Reputation: 208002

Nothing really other than you've coded it so that when the div is dropped, it becomes a child of the larger div and then based on the positioning it ends up off screen. See what happens when you reposition the larger div: jsFiddle

Upvotes: 1

Related Questions