Déplacer un "draggable" dont l'évènement est lancé sans mouvement de souris

Bonjour à tous,

Je suis entrain de développer un composant graphique en javascript permettant de gérer un planning. Pour le faire, j'utilise les bibliothèque JavaScript JQuery et JQuery-UI. Mon planning dispose de deux entêtes : un haut dessus et un sur la gauche, le premier étant un indicateur de temps et le second un indicateur d'action.

Au croisement des deux se trouve les différentes tâches planifiées qui peuvent être déplacées, agrandies ou diminuées. J'utilise donc les widgets JQuery-UI "Draggable" et "Resizable" pour le permettre.

Cependant, afin de rendre mon interface plus pratique, lorsque l'utilisateur est entrain de modifier la durée ou la date d'une tâche et qu'il s'approche des bords gauche ou droite du planning je fais défiler les jours.

Cette partie est gérée par un élément "div" contenu dans une autre élément "div" avec l'attribut css "overflow: hidden" et le changements de l'attribut css "left" du premier élément "div".

Ma tache est elle même positionnée par rapport à l'élément "div" que je déplace lorsque je fais un "scrollin". L'utilisation du widget "Draggable" change donc l'attribut css "left" de l'élément "div" représentant la tâche (Je parlerais d'ailleurs maintenant de tâche en parlant de cet élément "div" le représentant). Cependant lorsque je fais un "scrolling" tout en déplaçant la tâche, elle garde son attribut css "left" et est donc déplacée en même temps que le container qui la contient. J'ai donc rajouté un évènement permettant de déplacer aussi la tâche qui est "draggée" (excusé cet anglicisme) afin qu'elle reste à la position du curseur lorsque je déplace l'attribut css "left" du container.

Malheureusement, et c'est la que mon problème arrive, des que je rebouge la souris, la tâche reprend la valeur de l'attribut css "left" tel qu'il était avant que je le force durant l'évènement "draggable".

J'ai passé une mâtiné à chercher une solution que ça soit sur internet, dans les documentations de l'API, en essayant de "bidouiller" mais je n'ai rien trouvé. Je pensais avoir trouvé en utilisant l'option "refreshPositions: true" du widget "draggable" mais malheureusement cela n'a rien changée.

Si quelqu'un à une solution pour déplacer correctement, sans la souris, un élément HTML dont l’évènement "draggable" est en cours, je le remercie d'avance.

Cordialement,

Zarwa

Afin que vous puissiez mieux comprendre mon problème, je vous donne un lien vers un exemple résumant mon problème :
Cliquer ici

La "tâche 1" n'est pas repositionnée lors du "scrolling", elle est donc déplacée en même temps. C'est la raison pour laquelle je repositionne mon élément "div" lors du "scrolling" dans la "Tache 2".
Cependant vous pourrez remarquer que dès que l'on rebouge la souris (tout en continuant de "draggué" cette tâche) elle retourne à sa position css tel qu'elle était lorsque le "scrolling" a commencé.

J'espère que ces précisions vous auront permit de mieux comprendre mon problème.

Personne n'a d'idée?