annotate src/index.html @ 10:ad2f6525c4c5

minor fix
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 11 May 2023 13:07:00 -0600
parents eee8862be4c7
children f6ac0c3ad3eb
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
1 <!doctype html>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
2 <html>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
3 <head>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1">
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 <style>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 @import "/site.css";
5
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
7
9
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
8 h1 {
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
9 margin-bottom: 8px;
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
10 }
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
11 h4 {
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
12 margin-top: 0;
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
13 }
5
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
14 code {
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
15 white-space: pre-line;
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
16 display: block;
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
17 margin-left: 32px;
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
18 }
0
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 </style>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 <title>Reactionary Drag and Drop</title>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21 </head>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22 <body>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23 <h1>Reactionary Drag and Drop</h1>
9
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
24 <h4><a href="http://www.reactionary.software/">Reactionary Software</a> by <a href="https://www.linkmystyle.com/fschmidt">fschmidt</a></h4>
0
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25
9
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
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
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents: 0
diff changeset
27
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 2
diff changeset
28 <p>I will start by reviewing some of the existing depraved alternatives:</p>
1
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents: 0
diff changeset
29 <ul>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents: 0
diff changeset
30 <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents: 0
diff changeset
31 <li><a href="/alternatives/interactjs.html">interact.js</a></li>
2
264646feb67b add draggabilly
Franklin Schmidt <fschmidt@gmail.com>
parents: 1
diff changeset
32 <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li>
1
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents: 0
diff changeset
33 </ul>
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 2
diff changeset
34
9
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
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
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 2
diff changeset
36 <ul>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 2
diff changeset
37 <li><a href="/examples/simple.html">Simple</a></li>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 2
diff changeset
38 <li><a href="/examples/handle.html">Handle</a></li>
4
0130ae25ef94 add drop
Franklin Schmidt <fschmidt@gmail.com>
parents: 3
diff changeset
39 <li><a href="/examples/drop.html">Drop</a></li>
6
4d699321068f add dropzones
Franklin Schmidt <fschmidt@gmail.com>
parents: 5
diff changeset
40 <li><a href="/examples/dropzones.html">Dropzones</a></li>
8
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 6
diff changeset
41 <li><a href="/examples/list.html">List</a></li>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents: 6
diff changeset
42 <li><a href="/examples/list2.html">Dynamic List</a></li>
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 2
diff changeset
43 </ul>
5
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
44
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
45 <p>When dragging starts, this happens:
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
46 <code>
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
47 original = dad.whatToDrag(draggable);
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
48 dragging = original.cloneNode(true);
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
49 original.parentNode.appendChild(dragging);
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
50 </code>
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
51 </p>
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
52
Franklin Schmidt <fschmidt@gmail.com>
parents: 4
diff changeset
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
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
54
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
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>
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
56
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 8
diff changeset
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
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
58 </body>
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 </html>