Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<ol> <li>Register your mousedown handler on the drag controller (e.g. the title bar of the window).</li> <li>When you are dragging, update the position of a different element (e.g. the window wrapper).</li> </ol> <p>I have an example of this here:<br> <a href="http://phrogz.net/js/PhrogzWerkz/WerkWin.html" rel="nofollow">http://phrogz.net/js/PhrogzWerkz/WerkWin.html</a></p> <p><em>If you need this to work with a specific library—like a jQuery UI library—then please edit your question to say say.</em></p> <h2>Simpler Demo: <a href="http://jsfiddle.net/VCQuN/1/" rel="nofollow">http://jsfiddle.net/VCQuN/1/</a></h2> <pre class="lang-html prettyprint-override"><code>&lt;div class="window"&gt; &lt;div class="titlebar"&gt;Hello, World!&lt;/div&gt; &lt;div class="content"&gt; &lt;p&gt;Window &lt;b&gt;Content!&lt;/b&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;​ </code></pre> <pre class="lang-js prettyprint-override"><code>// For each item with a `window` class… var windows = document.querySelectorAll('.window'); [].forEach.call(windows,function(win){ // …find the title bar inside it and do something onmousedown var title = win.querySelector('.titlebar'); title.addEventListener('mousedown',function(evt){ // Record where the window started var real = window.getComputedStyle(win), winX = parseFloat(real.left), winY = parseFloat(real.top); // Record where the mouse started var mX = evt.clientX, mY = evt.clientY; // When moving anywhere on the page, drag the window // …until the mouse button comes up document.body.addEventListener('mousemove',drag,false); document.body.addEventListener('mouseup',function(){ document.body.removeEventListener('mousemove',drag,false); },false); // Every time the mouse moves, we do the following function drag(evt){ // Add difference between where the mouse is now // versus where it was last to the original positions win.style.left = winX + evt.clientX-mX + 'px'; win.style.top = winY + evt.clientY-mY + 'px'; }; },false); }); ​ </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