Mercurial Hosting > dad
changeset 1:9c372fce698a
start alternatives
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Wed, 19 Apr 2023 23:04:23 -0600 |
parents | e863dbc62217 |
children | 264646feb67b |
files | src/alternatives/interactjs.html src/alternatives/standard.html src/index.html |
diffstat | 3 files changed, 131 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/alternatives/interactjs.html Wed Apr 19 23:04:23 2023 -0600 @@ -0,0 +1,99 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + + div[drag] { + border: 1px solid; + margin: 8px; + padding: 8px; + touch-action: none; + background-color: LightGreen; + } + </style> + <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js"></script> + <script> + 'use strict'; + + let dxDrag, dyDrag; + + function dragStartListener(event) { + dxDrag = 0; + dyDrag = 0; + } + + function dragMoveListener(event) { + dxDrag += event.dx; + dyDrag += event.dy; + event.target.style.transform = `translate(${dxDrag}px, ${dyDrag}px)`; + } + + function dragEndListener(event) { + event.target.style.transform = null; + } + + function indexOf(a,el) { + for( let i=0; i<a.length; i++ ) { + if( a[i] === el ) + return i; + } + return -1; + } + + function dragEnterListener(event) { + console.log(event); + let entered = event.target; + let dragging = event.relatedTarget; + if( entered === dragging ) + return; + let divs = document.querySelectorAll('div[drag]'); + let iEntered = indexOf(divs,entered); + let iDragging = indexOf(divs,dragging); + console.log(iDragging+' '+iEntered); + let parent = entered.parentNode; + if( iDragging < iEntered ) { + let next = divs[iEntered+1]; + if( next ) { + parent.insertBefore( dragging, next ); + } else { + parent.appendChild( dragging ); + } + } else { + parent.insertBefore( dragging, entered ); + } + } + + function init() { + let dad = interact('div[drag]'); + dad.draggable({ + listeners: { + start: dragStartListener, + move: dragMoveListener, + end: dragEndListener, + } + }); + dad.dropzone({ + ondragenter: dragEnterListener, + }); + } + </script> + </head> + <body> + <h1><a href="https://interactjs.io/">interact.js</a></h1> + + <p>This has a number of problems. First, it is clearly too complicated. And this means that it isn't on just one JavaScript file. One has to use the modern horror of <b>npm</b> to get it (which I refuse to do). The suggested way of handling dragging doesn't work when the DOM changes, as the example below shows. There is probably some complicated way around this, but I can't be bothered given the other issues.</p> + + <div> + <script> + for( let i=1; i<=10; i++ ) { + document.write(` + <div drag id="${i}">${i} - drag me</div> +` ); + } + </script> + </div> + </body> + <script> init(); </script> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/alternatives/standard.html Wed Apr 19 23:04:23 2023 -0600 @@ -0,0 +1,25 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + + span[draggable] { + display: inline-block; + background-color: LightGreen; + padding: 8px; + cursor: move; + } + </style> + </head> + <body> + <h1>Standard Drag and Drop API</h1> + + <p>As documented on <a href="https://www.w3schools.com/html/html5_draganddrop.asp">w3schools</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">mozilla</a>.</p> + + <p><span draggable="true">drag me</span></p> + + <p>This works on desktop but doesn't work on mobile. So this API is completely useless.</p> + </body> +</html>
--- a/src/index.html Tue Apr 18 21:52:25 2023 -0600 +++ b/src/index.html Wed Apr 19 23:04:23 2023 -0600 @@ -10,6 +10,12 @@ <body> <h1>Reactionary Drag and Drop</h1> - <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 is a <a href="https://communities.win/c/programming/p/16an5RSxmy/javascript-drag-and-drop/c">discussion thread</a> if you want to comment.</p> + <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> + + <p>I will start by reviewing the existing depraved alternatives:</p> + <ul> + <li><a href="/alternatives/standard.html">Standard Drag and Drop API</a></li> + <li><a href="/alternatives/interactjs.html">interact.js</a></li> + </ul> </body> </html>