469,314 Members | 2,207 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,314 developers. It's quick & easy.

Drag drop prob with javascript

Hi i'm using the below code which i need that when the user clicks on the "drag.gif" the whole div is drag and droped. The code works fine if i put the image out of the table...

any suggention on why its not working?
Expand|Select|Wrap|Line Numbers
  1.     <script type="text/javascript">
  2.             document.onmousedown = MouseDown;
  3.             document.onmousemove = MouseMove;
  4.             document.onmouseup = MouseUp;
  5.  
  6.             N = (document.all) ? 0 : 1;
  7.  
  8.             if (N) 
  9.             {
  10.                 document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  11.             }
  12.  
  13.             var ob;
  14.             var dv;
  15.  
  16.             function MouseDown(e) 
  17.             {
  18.                 if (N) 
  19.                 {
  20.                     ob = document.layers[e.target.name];
  21.                     X=e.x;
  22.                     Y=e.y;
  23.                     return false;
  24.                 }
  25.                 else 
  26.                 {
  27.                     ob = event.srcElement.parentElement.style;
  28.                     X=event.offsetX;
  29.                     Y=event.offsetY;
  30.                 }
  31.             }
  32.  
  33.             function MouseMove(e) 
  34.             {
  35.                 if (ob)
  36.                 {
  37.                     if (N) 
  38.                     {
  39.                         ob.moveTo((e.pageX-X), (e.pageY-Y));
  40.                     }
  41.                 else 
  42.                 {
  43.                     ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
  44.                     ob.pixelTop = event.clientY-Y + document.body.scrollTop;
  45.                     return false;
  46.                 }
  47.             }
  48.             }
  49.  
  50.             function MouseUp() 
  51.             {
  52.                 ob = null;
  53.             }
  54.  
  55.             function removeEvent()
  56.             {
  57.                 if (document.getElementById('dragContainer') != null)
  58.                 {
  59.                     document.forms[0].removeChild(dv);
  60.                 }
  61.             }
  62.  
  63.             function MsgBox (name, createdDate) 
  64.             {
  65.                 removeEvent();
  66.  
  67.                 dv = document.createElement('div');
  68.                 dv.setAttribute('id',"dragContainer");
  69.                 dv.className="regular";
  70.                 dv.style.position="absolute";       
  71.                 dv.style.position="absolute"; 
  72.                 dv.style.pixelLeft= 500;
  73.                 dv.style.pixelTop = 50 ;
  74.                 dv.style.pixelWidth=10;
  75.                 dv.style.pixelHeight=20;
  76.                 dv.innerHTML="<table cellpadding='0' cellspacing='0'height='200' width='300'><tr><td><img src='drag.gif' OnMouseDown='MU()' OnMouseUp='MU()'/></td><td><img src='close_icon.gif' onclick='removeEvent()' /></td></tr><tr><td  colspan='2' width='100%' bgcolor='#CCCCCC' align='CENTER' valign='MIDDLE' style='height: 76%'><font face='Helvetica,Verdana,Arial' size='3' color='#000066'><b>Name :" + name + "<br>Created on : " + createdDate + "</b></br /></font></td></tr></table>";
  77.  
  78.                 document.forms[0].appendChild(dv);
  79.             }
  80.  
  81.             function chnageText(strText)
  82.             {
  83.                document.getElementById('<%=txtPath.ClientID%>').value = strText;
  84.             }
  85.  
  86.     </script>
Jul 26 '07 #1
2 1081
pbmods
5,821 Expert 4TB
Heya, Talghagin. Welcome to TSDN!

What do you want your code to do? Give an example.
What is your code doing that you don't want it to do? Give an example.
What is your code *not* doing that it is supposed to? Give an example.
Jul 26 '07 #2
What do you want your code to do?

When the user clicks on the drag.gif the DIV is draged and when the user realses the mouse button the DIV is dropped were the button was released.

What is your code doing that you don't want it to do? Give an example.
The scrooll bars are int working, i can't click and drag them.

What is your code *not* doing that it is supposed to? Give an example
When the image is placed out of the table example "<div><img src=''drag.gif' /><TABLE...." the div is carried as it should.and when the iamge is part of the table the div doesn't move .

Hope this helps you in helpinh me
and thnak for the welcome :)
Jul 26 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by simon_s_li | last post: by
6 posts views Thread by jojobar | last post: by
2 posts views Thread by ameshkin | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.