rhishi20 Posted November 14, 2013 Share Posted November 14, 2013 <div onmousedown="mousedown(event)" onmousemove="mousemove(event)" onmouseup="mouseup(event)" id="dvpopupctl" runat="server" style="position:absolute;left:22%; top:34% ; width:500px ; height:auto; z-index:10001 ;display:none ;" > this is the div which i have displayed as popup. and now i want to make it draggable popup. i have tried through javascript but div moves only towards right side and towards bottom. i am not able to move popup to either left or upper side. following javascript functions i have used <script type="text/javascript"> // experiment for dragging div var flag1; function mousedown(e) { flag1 = 1; } function mousemove(e) { var cordx = 0; var cordy = 0; if (flag1 == 1) { if (!e) { var e = window.event; } if (e.pageX || e.pageY) { cordx = e.pageX; cordy = e.pageY; } else if (e.clientX || e.clientY) { cordx = e.clientX; cordy = e.clientY; } document.getElementById('dvpopupctl').style.left = cordx; document.getElementById('dvpopupctl').style.top = cordy; } } function mouseup(e) { flag1 = 0; } </script> please suggest changes in this code so that i can drag popup anywhere on screen. Link to comment Share on other sites More sharing options...
davej Posted November 14, 2013 Share Posted November 14, 2013 (edited) <!DOCTYPE html><html><head><meta charset="utf-8"><title>Drag Me</title><style>#dragme{position:absolute;display:none;height:100px;width:100px;background-color:#eee;border:1px solid black;border-radius:15px;text-align:center;}</style><script>var mousex;var mousey;var move = false;var ldivx = 200;var ldivy = 200;window.onload = init;function init() {var d = document.getElementById('dragme');d.onmousedown = mousedown;d.onmouseup = mouseup;d.onmousemove = mousemove;d.style.left = ldivx +'px';d.style.top = ldivy +'px';d.style.display = 'block';}function mousedown(e) {document.getElementById('dragme').style.color = 'red';move = true;mousex = e.clientX; mousey = e.clientY;}function mouseup(e) {document.getElementById('dragme').style.color = 'black';move = false;}function mousemove(e) {if(move){ldivx = ldivx + e.clientX - mousex;ldivy = ldivy + e.clientY - mousey;mousex = e.clientX;mousey = e.clientY;var d = document.getElementById('dragme');d.style.left = ldivx +'px';d.style.top = ldivy +'px';}}</script></head><body><div id="dragme">Drag me</div></body></html> Edited November 14, 2013 by davej 1 Link to comment Share on other sites More sharing options...
Hadien Posted November 14, 2013 Share Posted November 14, 2013 (edited) var dragflag = { move:false, offsetX:0, offsetY:0}function mousedown(e){ e.stopPropagation(); dragflag.move = true; dragflag.offsetX = e.clientX; dragflag.offsetY = e.clientY;}function mousemove(e){ e.stopPropagation(); if(!dragflag.move) return true; var d = document.getElementById('dvpopupctl').style; d.left = e.pageX-dragflag.offsetX +"px"; d.top = e.pageY-dragflag.offsetY +"px";}function mouseup(e){ e.stopPropagation(); dragflag.move = false; dragflag.offsetX = 0; dragflag.offsetY = 0;} added an offset so that when you begin to drag the div it won't snap it's top-left corner to the cursor Edited November 14, 2013 by Hadien Link to comment Share on other sites More sharing options...
rhishi20 Posted November 14, 2013 Author Share Posted November 14, 2013 it gives me error on e.stopPropagation(); object doesn't support this propery or method Link to comment Share on other sites More sharing options...
Hadien Posted November 14, 2013 Share Posted November 14, 2013 only 2 foreseeable reasons why that could happen, the event object wasn't passed into the function via 'e', or you're using IE 8 or below. when an event is triggered there are 3 directly available local variables (maybe more in other browsers and frameworks): arguments - the common arguments variable that every function has access to. event - this has the event object you want to use, which has the stopPropagation and the client/page coordinates. this - refers to the dom element that is currently firing the event reading the html you posted at the top, you should be passing in the 'event' variable directly into your event handlers. add a console.dir(e) inside your functions to see if they are really getting the event object (then look in the browser's debugger to see the console). as for IE8 and below, you can degrade gracefully by checking if the event has the function, then run it. and just unconditionally return false (which should also stop propagation, but will also prevent default actions too) if(e.stopPropagation) e.stopPropagation()//add middle code here//after everything else is donereturn false; 1 Link to comment Share on other sites More sharing options...
justsomeguy Posted November 14, 2013 Share Posted November 14, 2013 This is the code that people use to support older versions of IE: if (!e) { var e = window.event;}if (e.pageX || e.pageY) { cordx = e.pageX; cordy = e.pageY;}else if (e.clientX || e.clientY) { cordx = e.clientX; cordy = e.clientY;} Link to comment Share on other sites More sharing options...
davej Posted November 14, 2013 Share Posted November 14, 2013 (edited) Hmmm, no this code doesn't work in FF25... there is a definite logic error... I think you need to save not only the starting mouse position but also the starting div position, or do something like that. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Hadien Mouse Nov 2013</title><style>#dvpopupctl{position:absolute;display:none;width:100px;height:100px;border:1px solid black;border-radius:15px;text-align:center;}</style><script>var dragflag = { move:false, offsetX:0, offsetY:0 };window.onload = init;function init() {var d = document.getElementById('dvpopupctl');d.onmousedown = mousedown;d.onmouseup = mouseup;d.onmousemove = mousemove;d.style.left = dragflag.offsetX +'px';d.style.top = dragflag.offsetY +'px';d.style.display = 'block';}function mousedown(e){ e.stopPropagation(); document.getElementById('dvpopupctl').style.color = 'red'; dragflag.move = true; dragflag.offsetX = e.clientX; dragflag.offsetY = e.clientY;}function mousemove(e){ e.stopPropagation(); if(!dragflag.move) return true; var d = document.getElementById('dvpopupctl').style; d.color = 'orange'; d.left = e.pageX-dragflag.offsetX +"px"; d.top = e.pageY-dragflag.offsetY +"px";}function mouseup(e){ e.stopPropagation(); document.getElementById('dvpopupctl').style.color = 'black'; dragflag.move = false; dragflag.offsetX = 0; dragflag.offsetY = 0;}</script></head><body><div id="dvpopupctl">draggable</div></body></html> Edited November 14, 2013 by davej Link to comment Share on other sites More sharing options...
rhishi20 Posted November 19, 2013 Author Share Posted November 19, 2013 can anybody please explain with graphical example what is the difference between pagex/pagey , clientx/clienty, offsetx/offsety, screenx/screeny . i have read on Google about these but not understood properly. please give some practical example. Link to comment Share on other sites More sharing options...
rhishi20 Posted November 19, 2013 Author Share Posted November 19, 2013 To:Haiden Yes ! you are right i have run that code in internet explorer 8 and that's why e.stopPropagation() is not supported. so i have run that code in firefox and now e.stopPropagation() is working but when i first time drag popup it works but at second time popup goes to upper left corner automatically and finally disappears beyond upper left screen. Link to comment Share on other sites More sharing options...
rhishi20 Posted November 19, 2013 Author Share Posted November 19, 2013 same problem with davej's solution popup goes upper/left corner and finally disappears beyond upper/left screen. Link to comment Share on other sites More sharing options...
davej Posted November 19, 2013 Share Posted November 19, 2013 (edited) My code from post #2 above? The code in post #7 does not work, as I said. Are you using IE8 ? Page and Client seem to be the coordinate on the browser window. The screen seems to be the coordinate on the computer monitor. The offset seems to be the change since the last coordinate, but is not available in Firefox. Edited November 19, 2013 by davej Link to comment Share on other sites More sharing options...
Hadien Posted November 19, 2013 Share Posted November 19, 2013 It seems that when you try to move the popup again that we forgot to consider where the popup is currently at (its starting left and top). The first time you move the popup theres no apparent problem since the popup's left and top values are initially set (rather assumed) to 0. So to fix this, the mousedown fuction also needs to consider the current top and left attributes before dragging. function mousedown(e){ e.stopPropagation(); var d = document.getElementById('dvpopupctl').style; dragflag.move = true; dragflag.offsetX = e.clientX-(" "+d.left).replace(/D/gi,""); dragflag.offsetY = e.clientY-(" "+d.top).replace(/D/gi,"");} since top and left will be a string with numbers and "px" appended to it after the first time through, we need to perform a regular expression that will remove any and all non-number characters. The '" "+' is to ensure that if d.left or d.top are not strings going into the function, that they are transformed into strings before running the string function replace and thus not causing an error. give that a try and see how it works for you Link to comment Share on other sites More sharing options...
justsomeguy Posted November 19, 2013 Share Posted November 19, 2013 There's some information about the various coordinate properties here: http://www.quirksmode.org/js/events_properties.html#position Note the example script. The document scroll offset is added to clientX and clientY to get the same results as pageX and pageY in other browsers. This page lists browser compatibility for the various properties: http://www.quirksmode.org/mobile/tableViewport_desktop.html 1 Link to comment Share on other sites More sharing options...
rhishi20 Posted November 20, 2013 Author Share Posted November 20, 2013 (edited) To:Hadien I have tried by your way but popup's behavior is not changing this time it goes towards right-bottom corner. anyway thanks for help. Edited November 20, 2013 by rhishi20 Link to comment Share on other sites More sharing options...
rhishi20 Posted November 20, 2013 Author Share Posted November 20, 2013 To : Justsomeguy Thanks for useful info. Link to comment Share on other sites More sharing options...
davej Posted November 20, 2013 Share Posted November 20, 2013 Try post #2 above. I am now curious. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2013 Share Posted November 21, 2013 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Drag Me</title> <style> #dragme{ position:absolute; display:none; height:100px; width:100px; background-color:#eee; border:1px solid black; border-radius:15px; text-align:center; } </style> <script> var mousex; var mousey; var move = false; var ldivx = 200; var ldivy = 200; window.onload = init; function init() { var d = document.getElementById('dragme'); d.onmousedown = mousedown; d.onmouseup = mouseup; d.onmousemove = mousemove; d.style.left = ldivx + 'px'; d.style.top = ldivy + 'px'; d.style.display = 'block'; } function mousedown(e) { if (!e) var e = window.event; document.getElementById('dragme').style.color = 'red'; move = true; mousex = e.clientX; mousey = e.clientY; document.getElementById('xcords').innerHTML = mousex; document.getElementById('ycords').innerHTML = mousey; } function mouseup(e) { if (!e) var e = window.event; document.getElementById('dragme').style.color = 'black'; move = false; } function mousemove(e) { if (move) { if (!e) var e = window.event; ldivx = parseInt(ldivx) + parseInt(e.clientX) - parseInt(mousex); ldivy = parseInt(ldivy) + parseInt(e.clientY) - parseInt(mousey); mousex = e.clientX; mousey = e.clientY; document.getElementById('lxcords').innerHTML = ldivx; document.getElementById('lycords').innerHTML = ldivy; var d = document.getElementById('dragme'); d.style.left = parseInt(ldivx) + 'px'; d.style.top = parseInt(ldivy) + 'px'; } } </script> </head> <body> <div id="dragme"> Drag me </div> <div id="xcords"></div> <div id="ycords"></div> <hr /> <div id="lxcords"></div> <div id="lycords"></div> </body></html> 1 Link to comment Share on other sites More sharing options...
rhishi20 Posted November 21, 2013 Author Share Posted November 21, 2013 (edited) To: Davej You are brilliant. you have done it. thanks i think i have forgot to test your second post , i have tested 7th one. can you please explain it in details? the second post. Edited November 21, 2013 by rhishi20 Link to comment Share on other sites More sharing options...
rhishi20 Posted November 21, 2013 Author Share Posted November 21, 2013 (edited) thanks to everyone for helping me. finally got solution. Happy moments. Edited November 21, 2013 by rhishi20 Link to comment Share on other sites More sharing options...
davej Posted November 21, 2013 Share Posted November 21, 2013 Oh heck, I don't know, it just grabs the position of the mouse on mousedown, adds the offset provided by each mousemove and then saves the position after every mousemove. Dsonesuk has probably improved it in post #17. Link to comment Share on other sites More sharing options...
bchavdarov Posted December 20, 2013 Share Posted December 20, 2013 davej, I modified a little your code in order to work in IE and that's what I got: <!DOCTYPE html><html><head><meta charset="utf-8"><title>Drag Me</title><style>#dragme{position:absolute;display:none;height:100px;width:100px;background-color:#eee;border:1px solid black;border-radius:15px;text-align:center;}</style><script>var mousex;var mousey;var move = false;var ldivx = 200;var ldivy = 200;var IE = document.all?true:false;if (!IE) document.captureEvents(Event.MOUSEMOVE)window.onload = init;function init() {var d = document.getElementById('dragme');d.onmousedown = mousedown;d.onmouseup = mouseup;d.onmousemove = mousemove;d.style.left = ldivx +'px';d.style.top = ldivy +'px';d.style.display = 'block';}function mousedown(e) {document.getElementById('dragme').style.color = 'red';move = true;if (IE) { mousex = event.clientX + document.body.scrollLeft; mousey = event.clientY + document.body.scrollTop; } else { mousex = e.pageX; mousey = e.pageY; }}function mouseup(e) {document.getElementById('dragme').style.color = 'black';move = false;}function mousemove(e) {if(move){ if (IE) { ldivx = ldivx + event.clientX + document.body.scrollLeft - mousex; ldivy = ldivy + event.clientY + document.body.scrollTop - mousey; mousex = event.clientX + document.body.scrollLeft; mousey = event.clientY + document.body.scrollTop; } else { ldivx = ldivx + e.pageX - mousex; ldivy = ldivy + e.pageY - mousey; mousex = e.pageX; mousey = e.pageY; }var d = document.getElementById('dragme');d.style.left = ldivx +'px';d.style.top = ldivy +'px';}}</script></head><body><div id="dragme">Drag me</div></body></html> Link to comment Share on other sites More sharing options...
davej Posted December 20, 2013 Share Posted December 20, 2013 I had only tried IE9. It probably needs further refinement. It seems to lag. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now