Mercurial Hosting > dad
view src/index.html @ 7:332d3e280f7e
minor
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sun, 23 Apr 2023 20:46:17 -0600 |
parents | 4d699321068f |
children | 969d5980b375 |
line wrap: on
line source
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import "/site.css"; code { white-space: pre-line; display: block; margin-left: 32px; } </style> <title>Reactionary Drag and Drop</title> </head> <body> <h1>Reactionary Drag and Drop</h1> <p>I can't find a usable drag-and-drop JavaScript library, so, as usual, I am forced to write one. You can follow my progress, starting from zero, right here. Here is <a href="https://hg.reactionary.software/repo/dad/">the source</a>. Here is <a href="http://www.reactionary.software/drag.html">the need</a>. And here are discussion threads on <a href="https://communities.win/c/programming/p/16an5RSxmy/javascript-drag-and-drop/c">Scored</a> and <a href="http://www.mikraite.org/JavaScript-Drag-and-Drop-tp3229.html">Reactionary Software</a> if you want to comment.</p> <p>I will start by reviewing some of the existing depraved alternatives:</p> <ul> <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li> <li><a href="/alternatives/interactjs.html">interact.js</a></li> <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li> </ul> <p>Time to write my own. Here are some examples:</p> <ul> <li><a href="/examples/simple.html">Simple</a></li> <li><a href="/examples/handle.html">Handle</a></li> <li><a href="/examples/drop.html">Drop</a></li> <li><a href="/examples/dropzones.html">Dropzones</a></li> </ul> <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>. <p>When dragging starts, this happens: <code> original = dad.whatToDrag(draggable); dragging = original.cloneNode(true); original.parentNode.appendChild(dragging); </code> </p> <p>Most drag-and-drop tools drag the original by setting <b>position</b> to <b>relative</b> and moving it by setting <b>left</b> and <b>top</b>. But this breaks if the DOM is changed. So instead I clone the original and set <b>position</b> of the clone to <b>fixed</b>. This way, changing the DOM doesn't affect the location of what is being dragged.</p> </body> </html>