Question

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

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

现在问题：

如果约会设置为15分钟，它将绘制一个25像素的块，这将是可拖动的。如果我将这个15分钟的约会拖到一个新的15分钟可放置的div中，它就像一个魅力。然而，当我引入30,45和1小时预约div（分别为50px，75px，100px）时，问题就出现了。当可拖动项目大于可投放div时，由于某种原因，它总是将约会放在直接位于我正在目标的下方的可放置div框中。 E.G我的可拖动顶部在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链接，此刻此处非常繁忙！）。基本上，我需要找出如何让一个可拖动的项目捕捉到最接近其顶部的droppable div。

感谢您提供的任何帮助，

JB

Answer 1

好的。我想我找到了一种解决方法，因为我可以在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/

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

1 个答案: