Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28458

Move a div with mouse

Show all headers | View raw

I needed to solve an old stupid issue regarding an <iframe> (aka a <div> 
containing an <iframe>) that sometimes is misplaced in a page [served by 
a CGI] containing a form (depending by the size of the browser's 
window), and didn't want to go through calculations involving the size 
of the viewport or adaptive design (for now, in the future maybe...), 
moreover such a functionality seems handy, so I decided to implement a 
"drag 'n drop" function, and began to search around and to try to figure 
out how to do the damn thing.

After many hours searching, studying, testing and tinkering with Firefox 
and IE I ended up with this function:

// usage: makeMovable(<id of the div to drag>,<optional id of a 
"handler" (f.e. a small image inside the div) to drag the div>)

var makeMovable = function(target, handle) {
  target = document.getElementById(target);
  if (!handle) handle = target; else handle=document.getElementById(handle);
  if (document.addEventListener){
 
handle.addEventListener("mousedown",function(event){e=event||window.event;if 
(e.preventDefault) e.preventDefault(); else e.returnValue = false;})
  }else{
 
handle.attachEvent("onmousedown",function(event){e=event||window.event;if (e.preventDefault) 
e.preventDefault(); else e.returnValue = false; })
  }
  handle.onmousedown = function(event) {
   var e=event||window.event
   if (window.event){	//IE
    var initialXOffset = target.offsetLeft - e.clientX
    var initialYOffset = target.offsetTop - e.clientY
    document.onmousemove = function() {
     target.style.left = e.clientX + initialXOffset+"px";
     target.style.top = e.clientY + initialYOffset+"px";
    return false;
   }
   }else if (event){ //moz
   var initialXOffset = target.offsetLeft - event.pageX;
   var initialYOffset = target.offsetTop - event.pageY;
   document.onmousemove = function(event) {
    target.style.left = event.pageX + initialXOffset;
    target.style.top = event.pageY + initialYOffset;
    }
   }else{ alert("no event")// just in case}
   document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
   }
   return false;
  }
}

The first part tries to prevent the default action for the drag action 
on the div. I think to remember that HTML5 provides a way to natively 
support drag and drop, but since I still am lost with HTML5, hmmm, I 
disabled this little icon appearing in Firefox on dragging the div, and 
to be sure tried to make the same for IE.

Next comes the real thing, the onmousedown event activates the 
onmousemove event and applies to the style.top and style.left properties 
of the div the coordinates obtained from the mouse position.

I was very proud of the result and spent some time moving a <div> all 
around alternatively with IE and FF, while drinking a deserved gin and 
tonic (very hot here - 36 c°).

Then I tried on Chrome and Safari and none of them reacted. :-(
A subsequent session of work with the Chrome's debugger was inconclusive.

At the end of the tale, I implemented a very dumb "dock 'n release" 
function instead, compatible with all the "Fantastic 4" and 15 lines of 
code wide, and I am quite satisfied with it. First click on the handler 
docks the div to the mouse and second one releases it to the new 
position. :-)

So, JFC, why this does not work with those 2 browsers?

JFTR
The dock function:

function dock(el){
  if (document.onmousemove!=null) {
   el.innerHTML="Dock"
   document.onmousemove=null;
  }else {
   el.innerHTML="Release"
   document.onmousemove=function(eve){
    e=eve||window.event
    propx=e.clientX?"clientX":"pageX"
    propy=e.clientY?"clientY":"pageY"
    el.parentNode.style.top=(e[propy])-5+"px"
    el.parentNode.style.left=(e[propx])-5+"px"
   }
  }
}

<html>
<body>
<div 
style="position:absolute;top:150px;left:600px;width:340px;height:155px;background-color:#c0c0c0;">
   <div 
style="width:40px;height:15px;background-color:#48D7FF;font-size:8px;position:absolute;top:0px;float:left;" 
onclick="dock(this)">Dock</div>
<iframe src="Crono.html" id="ifra" 
style="position:relative;left:41px;"></iframe>
</div>
</body>
</html>

Dan
-- 
"Everybody should pay taxes with a smile"
I tried, but they want money.

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-21 13:26 +0200
  Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-24 20:36 +0200
    Re: Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-24 21:58 +0200
      Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-25 14:07 +0200
        Re: Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-25 19:47 +0200
          Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-25 20:54 +0200
            Re: Move a div with mouse "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-26 12:54 +0200
              Re: Move a div with mouse Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-26 13:36 +0200

csiph-web