0

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

4

1 回答 1

0

好吧。我想我找到了一种为你解决这个问题的方法，因为我能够在 JSFiddle 中复制它。

而不是使用这个：

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

你需要使用这个：

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

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

或者，您也可以使用它：

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

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

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

我想我在 JQuery 中找到了一种解决方法，这样您就不必在 PHP 中执行此操作。

替换这个：

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

有了这个：

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

新的 JSFiddle：http: //jsfiddle.net/Y6dbe/2/

于 2013-09-05T14:23:17.997 回答