[html, js] pb de drag&drop : super code inside :) si ca peu aider...

pb de drag&drop : super code inside :) si ca peu aider... [html, js] - HTML/CSS - Programmation

Marsh Posté le 30-01-2003 à 12:28:53    

g une image contenu dans une div
la div est 'draggable'.
mon pb est que lorsque je drag via la div directement (click depuis la div)... ca marche bien et quand je le fais via l'image (click depuis l'image)... ca buggue !!!
 
En fait, pour n'importe quel élément contenu dans le div.. ca fait pareil... mon drag foire...
Et ca me le fait sous ns et pas sous ie... :(
 
p.s: le drag est initialisé via la div (sur un onmouseover).
 
Est-ce un bug de ns ou alors fo til koment faire ?
 
please.. help :jap: liens sur le sujet ou autre serait cool aussi :D


Message édité par wouatouwouatou le 30-01-2003 à 12:55:47
Reply

Marsh Posté le 30-01-2003 à 12:28:53   

Reply

Marsh Posté le 30-01-2003 à 12:35:09    

>> mon drag foire...
 
foire comment ? du code, une page à montrer ?
 
il y a pas mal de variables de position dans l'objet event (x, offsetX, clientX, screenX), dont certaines relatives à l'objet qui génère l'événement (eg l'image au lieu du div).

Reply

Marsh Posté le 30-01-2003 à 12:51:59    

peu pas mettre en ligne...  :(
 
mais voila le code.. si vous pouvez le tester :)
 
Euh.. ca marche pas sous ns.. mais sous ie ca passe..
Je mexplique... sous ns (ns6), ca marche pas quand on clique sur l'image mais ca passe si on click sur la div elle-meme...
pour l'image.. changez l'url.
 
script js:

Code :
  1. function dndEvt(obj, strEvt, strFun, blnType)
  2. {
  3.   if ( obj.attachEvent )
  4.     eval('obj.' + ( ( blnType ) ? 'attach' : 'detach' ) + 'Event(strEvt,' + strFun + ')');
  5.   else
  6.   {
  7. obj.oldEvts[strEvt] ) );
  8.     eval('obj.' + strEvt + '=' + ( ( blnType ) ? strFun : 'null' ) );
  9.   }
  10. }
  12. function dndMXY(evt)
  13. {
  14.   evt = ( evt ) ? evt : window.event;
  16.   return ( evt.clientX != null ) ? [evt.clientX, evt.clientY] : [evt.pageX, evt.pageY];
  17. }
  19. function dndStart(evt)
  20. {
  21.   var arrMXY = dndMXY(evt),
  22.       obj = document.dndObj;
  24.   document.dndDrag = true;
  25.   document.dndDMXY = [arrMXY[0] - obj.offsetLeft, arrMXY[1] - obj.offsetTop];
  26.   dndEvt(document,'onmousemove','dndMove',true);
  27. }
  30. function dndMove(evt)
  31. {
  32.   var arrMXY = dndMXY(evt),
  33.       obj = document.dndObj;
  35.   obj = ( obj.style ) ? obj.style : obj;
  36.   obj.left = arrMXY[0] - document.dndDMXY[0];
  37.   obj.top = arrMXY[1] - document.dndDMXY[1];
  39.   return false;
  40. }
  43. function dndStop()
  44. {
  45.   document.dndDrag = false;
  46.   dndEvt(document,'onmousemove','dndMove',false);
  47. }
  49. function dndInit(obj)
  50. {
  51.   if ( !obj || document.dndDrag )
  52.     return;
  54.   document.dndObj = obj;
  55.   dndEvt(obj,'onmousedown','dndStart',true);
  56.   dndEvt(document,'onmouseup','dndStop',true);
  57. }


 
et le code html :

Code :
  1. <html>
  2. <head>
  3. <title>Drag&Drop</title>
  5. <style>
  6. DIV { background-color : #ffff00; width : 200; height : 100; left : 350; top : 300; position : absolute; }
  7. BODY { text-align : center; }
  8. </style>
  10. </head>
  12. <body><div id="divDND1" onmouseover="dndInit(this);" name="divDND1">blabla<br><img src="images/welcome2.gif"></img></div></body>
  13. </html>

Reply

Marsh Posté le 30-01-2003 à 13:53:00    

rajoute evt.preventDefault(); dans ton dndStart(). c'est l'équivalent DOM de mettre returnValue = false d'ie (ou return false dans le code onmouseXX=".... return false" ).
 
http://mazinger.technisys.com.ar/p [...] ompat.html


Message édité par youdontcare le 30-01-2003 à 13:54:37
Reply

Marsh Posté le 30-01-2003 à 14:17:23    

cool !!! Grand merci... :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed