How to properly control the position of a Cloned element when dragging it elsewhere

The code is intended to Drag/Drop a "Person" into a timeslot of a "Room", thus creating a "Reservation". The cloning of the person into the room works as expected, but later dragging that cloned element (now a "Reservation"), results in very weird positioning, and I can't seem to figure out why.

drop: function(event, ui) {
    if ($(ui.draggable).hasClass("person")) {
        var theItem = $(ui.draggable).clone();
        theItem.removeClass('person');
        theItem.addClass('rsvd');
    }else{
        var theItem = $(ui.draggable);
        // This Prevents wacky positioning
        theItem.removeAttr('style');    
    }
    theItem.draggable({
        revert: "invalid",
    });
    $(this).append(theItem);
}

The bare-bones code is at http://jsfiddle.net/gdpodesta/fD48E/, and you can see that after dragging either of the two purple names into a timeslot, the resulting red element cannot be positioned properly in another timeslot.

I've found that by removing the style attribute during the drop event, the problem goes away, but this doesn't seem like the "right" way of doing it....there's much more work to be done with this, and I don't want to go down a long path to find that this approach creates other problems - what am I missing to do it the right way?

P.S. I realize that using a table isn't "correct", but this allows me to clearly and easily control unrelated positioning, and leaves the CSS free to position according to the jquery events.

Answers


Like Rahul Gupta pointed out in his answer, the problem is with the clones having inline style.

Why?

Because for .rsvd you're using the original item for dragging, so all the positioning will be applied to the item being dragged and later you're appending a clone of the item along with the positioning.

Why this is not happening initially for .person?

Because you're using a clone as helper, so all the positioning wil be applied to the helper, you're cloning the original item which is untouched (no positioning is applied to it).

for fixing the issue, you can simply use a clone as helper while initializing it (.rsvd) as draggable inside the drop function

theItem.draggable({
            helper: 'clone',
            revert: "invalid",
        });

Updated fiddle

Side note: the draggable initialization you're doing for .rsvd in $(document).ready() is useless since there are no matching elements at that time


The problem is that the cloned elements has style=position: relative; which is causing the improper placement. So instead of removing the whole style attribute, you have to just set the value to attribute position to ''. Like this:

...
.....
// This Prevents wacky positioning
theItem.css('position',''); //removed the previous code  theItem.removeAttr('style'); 
.....
....

Need Your Help

add an icon under the submit button

twitter-bootstrap struts2

hello guys i'm using bootstrap and struts 2

json in select tags

jquery

i will come straight to the point i have this code in html

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.