danca
7/21/2015 11:27:00 AM
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.