Jump to content

how to make div popup draggable.


rhishi20

Recommended Posts

<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

<!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 by davej
  • Like 1
Link to comment
Share on other sites

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 by Hadien
Link to comment
Share on other sites

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;
  • Like 1
Link to comment
Share on other sites

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

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 by davej
Link to comment
Share on other sites

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

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

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 by davej
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

<!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>
  • Like 1
Link to comment
Share on other sites

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 by rhishi20
Link to comment
Share on other sites

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

  • 5 weeks later...

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...