|
0
|
1 <!doctype html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
5 <style>
|
|
|
6 @import "/site.css";
|
|
5
|
7
|
|
|
8 code {
|
|
|
9 white-space: pre-line;
|
|
|
10 display: block;
|
|
|
11 margin-left: 32px;
|
|
|
12 }
|
|
0
|
13 </style>
|
|
|
14 <title>Reactionary Drag and Drop</title>
|
|
|
15 </head>
|
|
|
16 <body>
|
|
|
17 <h1>Reactionary Drag and Drop</h1>
|
|
|
18
|
|
1
|
19 <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>
|
|
|
20
|
|
3
|
21 <p>I will start by reviewing some of the existing depraved alternatives:</p>
|
|
1
|
22 <ul>
|
|
|
23 <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li>
|
|
|
24 <li><a href="/alternatives/interactjs.html">interact.js</a></li>
|
|
2
|
25 <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li>
|
|
1
|
26 </ul>
|
|
3
|
27
|
|
|
28 <p>Time to write my own. Here are some examples:</p>
|
|
|
29 <ul>
|
|
|
30 <li><a href="/examples/simple.html">Simple</a></li>
|
|
|
31 <li><a href="/examples/handle.html">Handle</a></li>
|
|
4
|
32 <li><a href="/examples/drop.html">Drop</a></li>
|
|
6
|
33 <li><a href="/examples/dropzones.html">Dropzones</a></li>
|
|
3
|
34 </ul>
|
|
|
35 <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.
|
|
5
|
36
|
|
|
37 <p>When dragging starts, this happens:
|
|
|
38 <code>
|
|
|
39 original = dad.whatToDrag(draggable);
|
|
|
40 dragging = original.cloneNode(true);
|
|
|
41 original.parentNode.appendChild(dragging);
|
|
|
42 </code>
|
|
|
43 </p>
|
|
|
44
|
|
|
45 <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>
|
|
0
|
46 </body>
|
|
|
47 </html>
|
