CODEWITHSUNDEEP
jquery-ui
Steve
Steve

Reputation: 4898

jQuery-UI drop doesn't really drop anything in the droppable

I notice in the jsfiddle here - http://jsfiddle.net/stevea/T4sGh/1/ - that when you drag and drop the red box onto the beige box, it looks like the red box goes inside the beige box, but in the HTML it actually becomes a sibling of the beige box and is just given offsets to place it over the beige box:

<body style="cursor: auto;">
   <div id="box" class="ui-droppable"></div>
   <div id="redBox" class="ui-draggable" style="position: relative; left: 89px; top: -213px;"></div>
</body>

This was unexpected. I don't recall any jQuery-UI documentation that talks about this.Does anyone have a feel what what is going on here and perhaps be able to point me to some documentation?

Thanks

Upvotes: 0

Views: 65

Answers (2)

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

The draggable and droppable do not change the DOM by default. If you want to do that you can utilize the events that they expose. Here's your fiddle updated. I am using the drop event in order to reposition the draggable inside your droppable container on drop:

var cell_dropOps = {     
    drop : box_drop,        
    accept : '#redBox',
    drop: function (event, ui) {
        $(this).append(ui.draggable);
        ui.draggable.css({ top: 0, left: 0});
    }
};

Upvotes: 1

U.P
U.P

Reputation: 7442

If you look at the example on this jQuery UI page, you'll notice that this is the default behavior.

If you wish to make dragable object a child of dropable object, you will have to append it manually in your drop function like:

 $(this).append($(ui.helper[0]));

The whole purpose of mentioning accept : '#redBox' is that when you drop #redBox on your dropable div, the drop event gets fired.

Upvotes: 1

Related Questions