StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Following the extra information provided in the comment to answer 1, the way (that I know of) to approach this is to discard html native drag-drop support, instead implementing it yourself.</p> <p>I forget what it is that causes problems with older browsers (particularly IE), though I've a feeling it's either the event var of onTgtMouseDown or the clientX/scrollLeft.</p> <p>In any case, below code is tested with current Chrome and IE9.</p> <p>Hope it's suitable for your purposes (It positions the object visually, but doesn't alter a node's position within the DOM tree)</p> <pre><code><!DOCTYPE html> <html> <head> <style> #tgt { position: absolute; border: solid 1px red; text-align: center; display: inline-block; } </style> <script> function byId(e){return document.getElementById(e);} function myInit() { var dragMe = byId('tgt'); dragMe.ondragstart = function() { return false; } dragMe.onmousedown = onTgtMouseDown; } function onTgtMouseDown(e) { var mDlg, self=this; var initMx, intMy, initDlgX, initDlgY, dx, dy; var mTgt; mTgt = this; // mDlg = this.parentNode; // mDlg.zIndex = 1000; // mDlg.style.position = 'absolute'; mTgt.zIndex = 1000; mTgt.style.position = 'absolute'; e = e || event; initMx = e.pageX; initMy = e.pageY; initDlgX = mTgt.offsetLeft; initDlgY = mTgt.offsetTop; // offset from top left of element to mouse when button pressed dx = initMx - initDlgX; dy = initMy - initDlgY; document.onmousemove = function(e) { e = e || event; fixPageXY(e); mTgt.style.left = e.pageX-dx+'px'; mTgt.style.top = e.pageY-dy+'px'; } this.onmouseup = function() { document.onmousemove = null; } } // e = event function fixPageXY(e) { if (e.pageX == null && e.clientX != null ) { var html = document.documentElement var body = document.body e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0) e.pageX -= html.clientLeft || 0 e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0) e.pageY -= html.clientTop || 0 } } </script> </head> <body onload='myInit();'> <div id='tgt'>Drag Me</div> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload