Mercurial Hosting > dad
comparison src/index.html @ 19:dac260018e2e default tip
minor
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Sun, 15 Sep 2024 08:15:23 -0600 |
| parents | 881840185730 |
| children |
comparison
equal
deleted
inserted
replaced
| 18:881840185730 | 19:dac260018e2e |
|---|---|
| 19 </style> | 19 </style> |
| 20 <title>Reactionary Drag and Drop</title> | 20 <title>Reactionary Drag and Drop</title> |
| 21 </head> | 21 </head> |
| 22 <body> | 22 <body> |
| 23 <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://linkmy.style/fschmidt">fschmidt</a></h4> | 24 <h4><a href="https://www.reactionary.software/">Reactionary Software</a> by <a href="https://linkmy.style/fschmidt">fschmidt</a></h4> |
| 25 | 25 |
| 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> | 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> |
| 27 | 27 |
| 28 <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> |
| 29 <ul> | 29 <ul> |
| 50 </code> | 50 </code> |
| 51 </p> | 51 </p> |
| 52 | 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> | 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 | 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> | 55 <p>This library is fairly trivial which makes it a good example of <a href="https://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 | 56 |
| 57 <p>Here is <a href="https://hg.reactionary.software/repo/dad/">the source</a> of this website. And here is <a href="https://mikraite.arkian.net/JavaScript-Drag-and-Drop-tp3229.html">a discussion thread</a> if you want to comment.</p> | 57 <p>Here is <a href="https://hg.reactionary.software/repo/dad/">the source</a> of this website. And here is <a href="https://mikraite.arkian.net/JavaScript-Drag-and-Drop-tp3229.html">a discussion thread</a> if you want to comment.</p> |
| 58 </body> | 58 </body> |
| 59 </html> | 59 </html> |