[JS / CSS] Ignorer une div

[t0FF]

Bonjours. Je suis en train de développer une interface en JavaScript pour modifier un planning, et le glisser-déposer des séances me pose problème.

Concrètement, voilà à quoi ressemble l’interface :

http://toferie.free.fr/exemplePCI/exemple.jpg

J’utilise le Drag&Drop (celui de l’HTLM5 introduit à la base par IE). Les navigateurs implémentent différemment le D&D. J’utilise un code fournit ici : http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/

qui permet d’afficher un clone sous IE, lors du déplacement d’un objet. Ce clone n’est pas positionné exactement à l’endroit ou l’on lâche l’objet, mais en bas à droite de la souris. Je peux modifier la position du clone, mais si je positionne le clone à l’endroit voulu, c'est-à-dire sous le pointeur, l’événement onDrop ne se déclenche jamais, puisque le pointeur n’est plus sur une zone sur laquelle on peut Droppé, mais sur le clone. Pour résoudre mon problème, il faudrait que le pointeur passe à travers le clone. En gros, je souhaiterais faire une div qui n’existe que visuellement, que le pointeur ne la prenne pas en compte. Avec le zIndex, je peux la faire passer en dessous, mais du coup la div du clone ne se voit pas. Existe-t-il une façon de faire ce que je veux ?

Merci d’avance. N’hésitez-pas à poser des questions, je me suis peut-être mal exprimé.

[maximeK]

Salut je ne sais pas si tu cherche encore mais peux etre puis-je t'aider.

Ce que tu veux faire est bien trop compliquer mais je pense qu'avec un petit trick tu arriveras avec un meilleur resultat :

Pourquoi ne pas crée un cursor exprès pour ca :

Dans ton event draginStart tu recupere le nombre d'heure a déplacer ou la taille de ton rectangle bleu et tu applique a ta div draggable un style du genre :

.deux-heures{cursor: url(cursor/cursor.cur),auto;}

comme sa tu aura toujours ta sourie pour dropper et tu reapplique un style pour réavoir le bon cursor.

ps : http://www.rw-designer.com/online-cursor-editor

[t0FF]

Bonjours. Déjà, merci pour la réponse, ensuite, effectivement je n'ai toujours pas trouvé la solution à mon problème.

Je suis pas bien sûr de comprendre ce que tu suggères :

tu penses que je pourais remplacer le cursor par la div qui me pose problème ?

C'est la meilleur piste que j'ai eu pour l'instant, mais il est possible de générer un style de cursor dynamiquement ? Je dois aussi pouvoir gérer un pas, en javascript, on peut contrôler la position de la souris ? Je vais faire quelques rechercher, merci pour l'idée !

[maximeK]

Ceux que j'ai dit c'est que tu te crée un cursor custom ressemblant un temps soit peux au contenu de ta div ( peut etre 20-40% de la taille, juste pour dire que tu déplace ta div ).

event.clientX

event.clientY

Pour les positions tu les a dans les listener genre onMouseMouve...

oui tu applique dynamiquement un style CSS via JS

Mais le plus imple pour toi est d'ultiser le drag&drop jQuery qui marche avec IE7.IE8.... FF Chrome et Safarie

Peut etre regarde ici http://www.guillaumevoisin.fr/jquery/tutoriel-drag-and-drop-jquery-exemple-avec-une-liste-des-taches