JQuery draggable正在捕捉到所需目标下方的容器

我目前参与了一个基于网络的应用程序的开发，它的作用类似于每日预约系统。页面为每个员工显示三个独立的垂直柱（页面的100%高度），这些柱中包含一个叠在另一个上的25px div盒；每个div框都代表了当天15分钟的时间增量。创建约会时，屏幕将在适当的15分钟时间段内绘制一个div框，该框与工作人员和所述约会的开始时间相匹配

目前，我拥有的代码将这些约会设置为可拖拽的，并且每个15分钟的时间增量都是可拖拽的——这是为了允许在工作人员之间交换约会。当约会div拖到新时间时，接收它的可拖放框将拆分约会的id属性，并调用php页面在后台更新mysql表

现在谈谈问题：

如果约会时间设置为15分钟，它将绘制一个25px的区块，这将是可拖动的。如果我把这个15分钟的约会拖到一个新的15分钟可放下的div中，它就像一个符咒。然而，当我引入30、45和1小时预约div（分别为50px、75px和100px）时，问题就开始了。当可拖放项大于可拖放div时，出于某种原因，它将始终将约会放置在可拖放div框中，该框直接位于我要锁定的对象下方。例如，我的DragTable的顶部在9:15插槽中，它卡入9:30 div框-因此数据库更新的时间不正确。正如我所说，这只是当可拖动div超过可拖放div高度时的问题

下面是我的JQuery代码：

 //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'

 });

如果需要更多信息，请让我知道（很抱歉没有创建JFiddle链接，现在这里非常忙！）。本质上，我需要找出如何让一个可拖动的项目捕捉到最靠近其顶部的可拖放div

谢谢你能提供的帮助

---

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

而不是使用这个：

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

您需要使用以下选项：

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

JSFiddle：

或者，您也可以使用此选项：

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

JSFiddle：

我想我在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:

你能把你的HTML也放在这里吗，这样我就可以自己用JSFiddle了？基于JQuery很难假设您的HTML是什么样子的。谢谢您的快速回复！不幸的是，这并没有解决问题。可拖曳潜水艇仍在记录它降落在下面一个可降落潜水艇的内部。我已经通过使用php解决了这个问题，当预约时间超过15分钟（我知道这很不整洁！）时，我会使用php将时间值减少15分钟，以防有人加入并找到JQuery解决方案。再次感谢你，查德。检查我的编辑，它在JSFIDLE中工作。如果是blob15/blob30（在JSFIDLE中正常工作），则正常执行。如果是blob45/blob1hr，则获取上一个div的ID。绝对完美。我有一个不整洁的解决方案。谢谢你的帮助！没问题！很高兴这一切都成功了，尽管我不知道它当初为什么这么做。我想这只是你必须解决的问题之一。

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