|
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
|
|
9
|
8 h1 {
|
|
|
9 margin-bottom: 8px;
|
|
|
10 }
|
|
|
11 h4 {
|
|
|
12 margin-top: 0;
|
|
|
13 }
|
|
5
|
14 code {
|
|
|
15 white-space: pre-line;
|
|
|
16 display: block;
|
|
|
17 margin-left: 32px;
|
|
|
18 }
|
|
0
|
19 </style>
|
|
|
20 <title>Reactionary Drag and Drop</title>
|
|
|
21 </head>
|
|
|
22 <body>
|
|
|
23 <h1>Reactionary Drag and Drop</h1>
|
|
9
|
24 <h4><a href="http://www.reactionary.software/">Reactionary Software</a> by <a href="https://www.linkmystyle.com/fschmidt">fschmidt</a></h4>
|
|
0
|
25
|
|
14
|
26 <p>I can't find a usable drag-and-drop JavaScript library, so, as usual, I am forced to write one. I need something that works on mobile, supports both drag and dropzones, and is simple to use. And it shouldn't require an abomination like <b>npm</b> to get the files, one should just be able to download the needed files directly.</p>
|
|
1
|
27
|
|
3
|
28 <p>I will start by reviewing some of the existing depraved alternatives:</p>
|
|
1
|
29 <ul>
|
|
|
30 <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li>
|
|
|
31 <li><a href="/alternatives/interactjs.html">interact.js</a></li>
|
|
2
|
32 <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li>
|
|
1
|
33 </ul>
|
|
3
|
34
|
|
9
|
35 <p>So I wrote my own library in just these two file: <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>. Here are some examples using this library:</p>
|
|
3
|
36 <ul>
|
|
|
37 <li><a href="/examples/simple.html">Simple</a></li>
|
|
|
38 <li><a href="/examples/handle.html">Handle</a></li>
|
|
4
|
39 <li><a href="/examples/drop.html">Drop</a></li>
|
|
6
|
40 <li><a href="/examples/dropzones.html">Dropzones</a></li>
|
|
8
|
41 <li><a href="/examples/list.html">List</a></li>
|
|
|
42 <li><a href="/examples/list2.html">Dynamic List</a></li>
|
|
3
|
43 </ul>
|
|
5
|
44
|
|
|
45 <p>When dragging starts, this happens:
|
|
|
46 <code>
|
|
|
47 original = dad.whatToDrag(draggable);
|
|
|
48 dragging = original.cloneNode(true);
|
|
|
49 original.parentNode.appendChild(dragging);
|
|
|
50 </code>
|
|
|
51 </p>
|
|
|
52
|
|
|
53 <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>
|
|
9
|
54
|
|
|
55 <p>This library is fairly trivial which makes it a good example of <a href="http://www.reactionary.software/">reactionary software</a>. And it is purely JavaScript which everyone knows. Just compare the depraved alternatives listed to my code. My code is much simpler and is fully functional and robust. All of the modern alternatives are overcomplicated and fragile garbage. All modern code is like this, all just horrible garbage.</p>
|
|
|
56
|
|
|
57 <p>Here is <a href="https://hg.reactionary.software/repo/dad/">the source</a> of this website. 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>
|
|
0
|
58 </body>
|
|
|
59 </html>
|
