rhishi20 2 Posted November 14, 2013 Report 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. Quote Link to post Share on other sites
davej 251 Posted November 14, 2013 Report 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 Quote Link to post Share on other sites
Hadien 39 Posted November 14, 2013 Report 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 Quote Link to post Share on other sites
rhishi20 2 Posted November 14, 2013 Author Report Share Posted November 14, 2013 it gives me error on e.stopPropagation(); object doesn't support this propery or method Quote Link to post Share on other sites
Hadien 39 Posted November 14, 2013 Report 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 Quote Link to post Share on other sites
justsomeguy 1,135 Posted November 14, 2013 Report 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;} Quote Link to post Share on other sites
davej 251 Posted November 14, 2013 Report 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 Quote Link to post Share on other sites
rhishi20 2 Posted November 19, 2013 Author Report 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. Quote Link to post Share on other sites
rhishi20 2 Posted November 19, 2013 Author Report 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. Quote Link to post Share on other sites
rhishi20 2 Posted November 19, 2013 Author Report Share Posted November 19, 2013 same problem with davej's solution popup goes upper/left corner and finally disappears beyond upper/left screen. Quote Link to post Share on other sites
davej 251 Posted November 19, 2013 Report 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 Quote Link to post Share on other sites
Hadien 39 Posted November 19, 2013 Report 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 Quote Link to post Share on other sites
justsomeguy 1,135 Posted November 19, 2013 Report 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 Quote Link to post Share on other sites
rhishi20 2 Posted November 20, 2013 Author Report 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 Quote Link to post Share on other sites
rhishi20 2 Posted November 20, 2013 Author Report Share Posted November 20, 2013 To : Justsomeguy Thanks for useful info. Quote Link to post Share on other sites
davej 251 Posted November 20, 2013 Report Share Posted November 20, 2013 Try post #2 above. I am now curious. Quote Link to post Share on other sites
dsonesuk 906 Posted November 21, 2013 Report 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 Quote Link to post Share on other sites
rhishi20 2 Posted November 21, 2013 Author Report 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 Quote Link to post Share on other sites
rhishi20 2 Posted November 21, 2013 Author Report Share Posted November 21, 2013 (edited) thanks to everyone for helping me. finally got solution. Happy moments. Edited November 21, 2013 by rhishi20 Quote Link to post Share on other sites
davej 251 Posted November 21, 2013 Report 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. Quote Link to post Share on other sites
bchavdarov 0 Posted December 20, 2013 Report 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> Quote Link to post Share on other sites
davej 251 Posted December 20, 2013 Report Share Posted December 20, 2013 I had only tried IE9. It probably needs further refinement. It seems to lag. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.