Mercurial Hosting > dad
changeset 3:6d5e4b38b4fb
start drag
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Fri, 21 Apr 2023 00:58:31 -0600 |
parents | 264646feb67b |
children | 0130ae25ef94 |
files | src/alternatives/interactjs.html src/dad.css src/dad.js src/examples/handle.html src/examples/simple.html src/index.html |
diffstat | 6 files changed, 186 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/src/alternatives/interactjs.html Thu Apr 20 15:55:43 2023 -0600 +++ b/src/alternatives/interactjs.html Fri Apr 21 00:58:31 2023 -0600 @@ -43,6 +43,7 @@ } function dragEnterListener(event) { + //return; console.log(event); let entered = event.target; let dragging = event.relatedTarget; @@ -68,6 +69,7 @@ function init() { let dad = interact('div[drag]'); dad.draggable({ + autoScroll: true, listeners: { start: dragStartListener, move: dragMoveListener,
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/dad.css Fri Apr 21 00:58:31 2023 -0600 @@ -0,0 +1,12 @@ +[dad-drag] { + cursor: move; + touch-action: none; +} + +[dad-original] { + visibility: hidden !important; +} + +[dad-dragging] { + position: fixed !important; +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/dad.js Fri Apr 21 00:58:31 2023 -0600 @@ -0,0 +1,92 @@ +'use strict'; + +let dad = {}; + +{ + // override this if needed + dad.whatToDrag = function(draggable) { + return draggable; + }; + + + let original = null; + let dragging = null; + let touchX, touchY; + + function onMouseMove(event) { + //console.log(event); + event.preventDefault(); + let rect = dragging.getBoundingClientRect(); + dragging.style.left = `${rect.x+event.movementX}px`; + let y = rect.y + event.movementY; + if( y < 0 ) { + window.scrollBy( 0, y ); + } else if( y + rect.height > window.innerHeight ) { + window.scrollBy( 0, y + rect.height - window.innerHeight ); + } + dragging.style.top = `${y}px`; + } + + function onTouchMove(event) { + let touches = event.touches; + if( touches.length !== 1 ) + return; + let touch = touches[0]; + let x = touch.clientX; + let y = touch.clientY; + event.movementX = x - touchX; + event.movementY = y - touchY; + touchX = x; + touchY = y; + onMouseMove(event); + } + + function onMouseUp(event) { + //console.log(event); + original.removeAttribute('dad-original'); + document.body.removeChild(dragging); + document.removeEventListener('mousemove',onMouseMove); + document.removeEventListener('mouseup',onMouseUp); + document.removeEventListener('mousemove',onMouseMove); + document.removeEventListener('touchend',onMouseUp); + original.scrollIntoViewIfNeeded(false); + original = null; + dragging = null; + } + + function start(event) { + //console.log(event); + original = dad.whatToDrag(event.target); + dragging = original.cloneNode(true); + original.setAttribute('dad-original',''); + dragging.setAttribute('dad-dragging',''); + let rect = original.getBoundingClientRect(); + dragging.style.left = `${rect.x}px`; + dragging.style.top = `${rect.y}px`; + document.body.appendChild(dragging); + } + + function onMouseDown(event) { + start(event); + document.addEventListener('mousemove',onMouseMove); + document.addEventListener('mouseup',onMouseUp); + } + + function onTouchStart(event) { + start(event); + let touches = event.touches; + if( touches.length !== 1 ) + return; + let touch = touches[0]; + touchX = touch.clientX; + touchY = touch.clientY; + document.addEventListener('touchmove',onTouchMove); + document.addEventListener('touchend',onMouseUp); + } + + dad.setDraggable = function(el) { + el.setAttribute('dad-drag',''); + el.addEventListener('mousedown',onMouseDown); + el.addEventListener('touchstart',onTouchStart); + }; +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/handle.html Fri Apr 21 00:58:31 2023 -0600 @@ -0,0 +1,43 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + @import "/dad.css"; + + span[handle] { + display: inline-block; + background-color: LightGreen; + padding: 8px; + } + span[outer] { + display: inline-block; + background-color: LightBlue; + padding: 8px; + } + </style> + <script src="/dad.js"></script> + <script> + dad.whatToDrag = function(draggable) { + return draggable.parentNode; + }; + + function init() { + let span = document.querySelector('span[handle]'); + dad.setDraggable(span); + } + </script> + </head> + <body> + <h1>Handle</h1> + <p> + <span outer> + <span handle>drag me</span> + along for the ride + </span> + </p> + <p>bottom</p> + </body> + <script> init(); </script> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/examples/simple.html Fri Apr 21 00:58:31 2023 -0600 @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <head> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <style> + @import "/site.css"; + @import "/dad.css"; + + span[drag] { + display: inline-block; + background-color: LightGreen; + padding: 8px; + } + </style> + <script src="/dad.js"></script> + <script> + function init() { + let span = document.querySelector('span[drag]'); + dad.setDraggable(span); + } + </script> + </head> + <body> + <h1>Simple</h1> + <p><span drag>drag me</span></p> + <p>bottom</p> + </body> + <script> init(); </script> +</html>
--- a/src/index.html Thu Apr 20 15:55:43 2023 -0600 +++ b/src/index.html Fri Apr 21 00:58:31 2023 -0600 @@ -12,11 +12,18 @@ <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> + <p>I will start by reviewing some of 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> <li><a href="/alternatives/draggabilly.html">Draggabilly</a></li> </ul> + + <p>Time to write my own. Here are some examples:</p> + <ul> + <li><a href="/examples/simple.html">Simple</a></li> + <li><a href="/examples/handle.html">Handle</a></li> + </ul> + <p>These use <a href="/dad.js">dad.js</a> and <a href="/dad.css">dad.css</a>. </body> </html>