JQuery draggable is snapping to a container below the desired target

Question

I am currently involved in the development of a webbased application that acts simmilarly to a daily appointment booking system. The page displays three separate verticle columns (100% height of the page) for each member of staff, and contained within these columns are 25px div boxes stacked one on top of another; each of these div boxes is representative of a 15 minute increment of time for that day. When an appointment is created the screen will draw a div box within the appropriate 15 minute time block that matches the staff member and start time of said appointment.

Currently, the code i have working sets these appointments to be draggable and each of the 15 minute time increments is droppable - this is to allow for appointments to be swapped between staff members. When the the appointment div is dragged to a new time, the droppable box that receives it will split the id attributes of the appointment and call a php page to update a mysql table in the background.

Now to the problem:

If the appointment is set for a length of 15 minutes, it will draw a 25px block and this will be draggable. If i drag this 15 minute appointment into a new 15 minute droppable div, it works like a charm. However, the problems start when I introduce 30, 45 and 1 hr appointment divs (50px, 75px, 100px respectively). When the draggable item is larger than the droppable div, for some reason, it will always place the appointment in the droppable div box that is directly below the one i am targetting. E.G the top of my draggable is in line the the 9:15 slot, and it snap's down into the 9:30 div box - thus the database is updated with an incorrect time. As i say, this is only an issue when the draggable div exceeds the height of the droppable div.

Below is my JQuery code:

 //functions for the droppable div's - updates the time slots
 $(".time_Row" ).droppable({

    accept: ".blob15, .blob30, .blob45, .blob1hr",
    drop: function( event, ui ) {

        ui.draggable.position({

            of: $(this),
            my: 'left top',
            at: 'left top'

        });

        var id = $(this).closest("div").attr("id");
        var split = id.split("-");
        var app = ui.draggable.attr("id").split("&");
        //split start time for refresh
        var sTime = split[1].split(":");

        $.post("updateapp.php",
            {
              APID: app[0],
              ServiceTime: app[1],
              Date: app[3],
              StaffID: split[0],
              StartTime: split[1]

            }

        );

    }

});

//functions for 15 min blobs
 $( ".blob15" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner'

 });

 //functions for 30 min blobs
 $( ".blob30" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner'

 });

 //functions for 45 min blobs
 $( ".blob45" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner',


 });

 //functions for 1hr blobs
 $( ".blob1hr" ).draggable({

 snap: '.time_Row',
 snapMode: 'inner'

 });

If any more information is required, please let me know (sorry for not creating a JFiddle link, it's extremely busy round here at the moment!). Essentially, i need to find out how to get a draggable item to snap to the droppable div that is closest to the top of it.

Thanks for any help you can provide,

JB

Answer 1

Alright. I think I found a way to fix this for your, as I was able to duplicate it in JSFiddle.

Instead of using this:

ui.draggable.position({
    of: $(this),
    my: 'left top',
    at: 'left top'
});

You need to use this:

$(this).position({
    of: $(this),
    my: 'left top',
    at: 'left top'
});

JSFiddle: http://jsfiddle.net/Y6dbe/

Alternatively, you could use this as well:

ui.draggable.position({
    of: ui.draggable,
    my: 'left top',
    at: 'left top'
});

JSFiddle: http://jsfiddle.net/Y6dbe/1/

--------------------------------EDIT-------------------------------

I think I found a workaround in JQuery so that you don't have to do this in your PHP.

Replace this:

var id = $(this).closest("div").attr("id");

With this:

var id;    
if(ui.draggable.hasClass("blob15")
  || ui.draggable.hasClass("blob30")) {
    id = $(this).attr("id");
} else {
     id = $(this).prev("div").attr("id");
}

New JSFiddle: http://jsfiddle.net/Y6dbe/2/