Javascript 动态地使某些元素可拖放

我正在制作一个网络应用程序。我有一个表作为日历，cells class=dtime作为一周中不同日子的时隙

下面是客户列表。将鼠标悬停在名称上时，日历中的单元格将变为红色，无法使用toggleClass根据已知的时间冲突在此处调度客户端。这些名称将被拖到日历中，并放置在不冲突的时间段上，以“安排”客户端

我只希望非冲突的时隙是可删除的。但是带有“conflict”类的单元格会随着每个客户机的变化而变化，并且只有在将鼠标悬停在客户机名称上时才会附加这些单元格

我的问题是：当$document.ready上不存在“conflict”类a，而$document.ready上的“conflict”类b根据鼠标位置动态更改时，如何使没有“conflict”类的所有单元格都可拖放

我尝试在$document.ready中使用$'.dtime'.not'.conflict'.droppable，但这不起作用，因为在加载页面时，没有任何单元格具有“conflict”类，并且在客户端名称悬停之前不会

我能做的最接近的事情就是让所有的时隙都可以删除，并设置“结束”、“退出”和“删除”的规则。在每个设置中，它测试“conflict”类，然后更改单元格颜色以显示时间段是“可接受的”，模仿hoverClass，或者调度客户机，或者在不执行任何操作的情况下返回。这是可行的，但a似乎应该有更好的方法，b如果你将鼠标移动到单元格中太快，它不会捕捉到“冲突”类并变为绿色，如果你尝试放下它，它会保持绿色

您可以在JSFIDLE中的注释代码中看到我的其他尝试，这些尝试都是计时可拖放的启动。没有什么是完美的

---

你能告诉我如何动态地使某些元素可拖放，或者告诉我完全实现我想要的东西的另一种方法吗？

你有没有尝试在hover的mouseleave处理程序中使用可拖放的'destroy'？请参阅@charlietfl将droppable'destroy'添加到hover的mouseleave返回错误：无法在初始化之前调用droppable上的方法；试图调用方法“destroy”。即使我将Dropable initiation（可拖放初始化）移动到hover mouseenter Handler（鼠标指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针指针，并且似乎取决于移动鼠标的速度。我的初始化是否在错误的位置？