Mercurial Hosting > dad

comparison src/index.html @ 9:eee8862be4c7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
update text
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 28 Apr 2023 21:07:17 -0600
parents 969d5980b375
children f6ac0c3ad3eb
comparison
equal deleted inserted replaced
8:969d5980b375 9:eee8862be4c7
3 <head> 3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style> 5 <style>
6 @import "/site.css"; 6 @import "/site.css";
7 7
8 h1 {
9 margin-bottom: 8px;
10 }
11 h4 {
12 margin-top: 0;
13 }
8 code { 14 code {
9 white-space: pre-line; 15 white-space: pre-line;
10 display: block; 16 display: block;
11 margin-left: 32px; 17 margin-left: 32px;
12 } 18 }
13 </style> 19 </style>
14 <title>Reactionary Drag and Drop</title> 20 <title>Reactionary Drag and Drop</title>
15 </head> 21 </head>
16 <body> 22 <body>
17 <h1>Reactionary Drag and Drop</h1> 23 <h1>Reactionary Drag and Drop</h1>
24 <h4><a href="http://www.reactionary.software/">Reactionary Software</a> by <a href="https://www.linkmystyle.com/fschmidt">fschmidt</a></h4>
18 25
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> 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>
20 27
21 <p>I will start by reviewing some of the existing depraved alternatives:</p> 28 <p>I will start by reviewing some of the existing depraved alternatives:</p>
22 <ul> 29 <ul>
23 <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li> 30 <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li>
24 <li><a href="/alternatives/interactjs.html">interact.js</a></li> 31 <li><a href="/alternatives/interactjs.html">interact.js</a></li>
25 <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li> 32 <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li>
26 </ul> 33 </ul>
27 34
28 <p>Time to write my own. Here are some examples:</p> 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>
29 <ul> 36 <ul>
30 <li><a href="/examples/simple.html">Simple</a></li> 37 <li><a href="/examples/simple.html">Simple</a></li>
31 <li><a href="/examples/handle.html">Handle</a></li> 38 <li><a href="/examples/handle.html">Handle</a></li>
32 <li><a href="/examples/drop.html">Drop</a></li> 39 <li><a href="/examples/drop.html">Drop</a></li>
33 <li><a href="/examples/dropzones.html">Dropzones</a></li> 40 <li><a href="/examples/dropzones.html">Dropzones</a></li>
34 <li><a href="/examples/list.html">List</a></li> 41 <li><a href="/examples/list.html">List</a></li>
35 <li><a href="/examples/list2.html">Dynamic List</a></li> 42 <li><a href="/examples/list2.html">Dynamic List</a></li>
36 </ul> 43 </ul>
37 <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>.
38 44
39 <p>When dragging starts, this happens: 45 <p>When dragging starts, this happens:
40 <code> 46 <code>
41 original = dad.whatToDrag(draggable); 47 original = dad.whatToDrag(draggable);
42 dragging = original.cloneNode(true); 48 dragging = original.cloneNode(true);
43 original.parentNode.appendChild(dragging); 49 original.parentNode.appendChild(dragging);
44 </code> 50 </code>
45 </p> 51 </p>
46 52
47 <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> 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>
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>
48 </body> 58 </body>
49 </html> 59 </html>