JqueryUI, arrastre los elementos a las celdas de un div desplegable desplegable que contiene una tabla grande

Estoy frente a un problema de arrastrar y soltar.

Siempre quiero ver el elemento que se está arrastrando y quiero poder desplazar un div específico para soltar el elemento en cualquier celda de mi tabla. También quiero poder arrastrar elementos de cualquier div a cualquier div.

Este ejemplo funciona casi bien. Mi último problema es sobre la celda.hoverClass propiedad: cuando estoy arrastrando un elemento del "contenedor A" cerca del borde del "contenedor B", implementé un comportamiento de desplazamiento automático para navegar en mi tabla y llegar a cualquier celda. Pero, después de la simulación de desplazamiento, elhoverClass No se aplica a la celda derecha. Sin embargo, el elemento siempre se coloca en la celda derecha.

https://jsfiddle.net/Bouillou/QvRjL/434/

¿Mi enfoque es correcto?

EDITAR

He encontrado una solución. La idea es agregar el elemento clone al contenedor desplazable durante la devolución de llamada de la construcción del ayudante, luego agregar el ayudante al cuerpo usando una función setTimeout después de 1 ms. La posición del ayudante se debe asignar en la posición del mouse para evitar problemas de desplazamiento.

Aquí está mi solución final:https://jsfiddle.net/Bouillou/QvRjL/434/

Estoy seguro de que es posible desarrollar una mejor manera de hacerlo.

Respuestas a la pregunta(2)

Su respuesta a la pregunta