如何放置一个使用多个droppable的可拖动元素？

Question

我正在做一个约会议程，我的第一个问题是如何只接受一个可拖动到一个拖车，它已成功回答。现在我的问题是，例如，我想在上午7点预约，我想让它变大（每个可放置的空间相当于15分钟，所以，1小时将是4个droppables）。在我的情况下，一个可拖动的最小15分钟“大小”。有一些插件，但我是Javascript和jQuery的新手，我还是不太理解。

其他大问题是我现在手动指定div的高度，仅用于测试，之后它们将可调整大小。因此，当我拖动项目时，它会在中间而不是在顶部，所以我需要拖动项目，直到它自身的一半接触到所需的可放置项目。

这些项目是一个类的div，我正在使用一个表，每个“td”都是可以删除的。

我希望我的问题有答案，谢谢！

更新：

代码是：

$( '.draggable_hour_1' ).resizable().draggable({
            appendTo: "body",
                helper: "clone",
                    revert:'invalid'
            });

我对droppable进行了验证，因为每个droppable没有添加多个draggable。