Jquery 如何在td顶部放置可拖动div

我的表有两列，第一列是time，第二列是

class='empty'

，另一个div是

class='interview'

，每当用户拖放div时，我希望将其位置精确地对齐在拖放的

td.empty

顶部，并将此td的类更改为

occulated

下面是我正在做的一个示例：

---

不幸的是，到目前为止，我还不能让它发挥作用，如果您能提供任何帮助，我们将不胜感激。

与其将可拖动元素放置在

td

的顶部，我建议在可拖放元素上触发drop事件时追加该元素：

根据下面的注释，如果希望元素跨越多行，可以添加：

table .empty {
  position: relative;
}
table .empty .interview {
  position: absolute;
  top: 0; left: 0;
}

您可以使用jQuery UI方法，如下所示：

$（文档）.ready（函数（）{
$（'.interview'）.draggable({
光标：“移动”，
还原：“无效”，
})
$（'.empty'）。可拖放({
下拉：功能（ev、ui）{
$（this）.removeClass（'empty'）.addClass（'occumped'）；
ui.draggable.position({
我的‘左上’，
在“左上角”，
作者：这个
});
}
})
})

表格{
边界塌陷：塌陷；
边框：1px实心#333；
}
表td{
边框：1px实心#c1a1a1！重要；
}
表时间{
宽度：60px；
字体系列：“Calibri”
}
桌子空了{
宽度：180px；
}
.面试{
边框：1px实心#ddd；
背景色：e1a2c1；
高度：35px；
宽度：180px；
}

09:00
10:00
11:00
12:00
13:00
14:00
这个测试

谢谢你的回答，这很有效，但是如果面试时间是从[10:00-12:00]开始的两个小时呢？你的小提琴充满了语法错误。。。请在发布问题之前解决这些问题

table .empty {
  position: relative;
}
table .empty .interview {
  position: absolute;
  top: 0; left: 0;
}