annotate src/alternatives/interactjs.html @ 1:9c372fce698a

start alternatives
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 19 Apr 2023 23:04:23 -0600
parents
children 6d5e4b38b4fb
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
1 <!doctype html>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
2 <html>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
3 <head>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1">
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 <style>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 @import "/site.css";
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
7
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
8 div[drag] {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
9 border: 1px solid;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
10 margin: 8px;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
11 padding: 8px;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
12 touch-action: none;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
13 background-color: LightGreen;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
14 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 </style>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js"></script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17 <script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18 'use strict';
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 let dxDrag, dyDrag;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22 function dragStartListener(event) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23 dxDrag = 0;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 dyDrag = 0;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
27 function dragMoveListener(event) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
28 dxDrag += event.dx;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 dyDrag += event.dy;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30 event.target.style.transform = `translate(${dxDrag}px, ${dyDrag}px)`;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
32
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33 function dragEndListener(event) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
34 event.target.style.transform = null;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
35 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
36
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
37 function indexOf(a,el) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
38 for( let i=0; i<a.length; i++ ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
39 if( a[i] === el )
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 return i;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
42 return -1;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
43 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
44
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
45 function dragEnterListener(event) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
46 console.log(event);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
47 let entered = event.target;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
48 let dragging = event.relatedTarget;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
49 if( entered === dragging )
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
50 return;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
51 let divs = document.querySelectorAll('div[drag]');
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
52 let iEntered = indexOf(divs,entered);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
53 let iDragging = indexOf(divs,dragging);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
54 console.log(iDragging+' '+iEntered);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
55 let parent = entered.parentNode;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
56 if( iDragging < iEntered ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
57 let next = divs[iEntered+1];
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
58 if( next ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 parent.insertBefore( dragging, next );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
60 } else {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
61 parent.appendChild( dragging );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
62 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
63 } else {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
64 parent.insertBefore( dragging, entered );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
65 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
66 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
67
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
68 function init() {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
69 let dad = interact('div[drag]');
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
70 dad.draggable({
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
71 listeners: {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
72 start: dragStartListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
73 move: dragMoveListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
74 end: dragEndListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
75 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
76 });
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
77 dad.dropzone({
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
78 ondragenter: dragEnterListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
79 });
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
80 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
81 </script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
82 </head>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
83 <body>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
84 <h1><a href="https://interactjs.io/">interact.js</a></h1>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
85
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
86 <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>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
87
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
88 <div>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
89 <script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
90 for( let i=1; i<=10; i++ ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
91 document.write(`
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
92 <div drag id="${i}">${i} - drag me</div>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
93 ` );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
94 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
95 </script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
96 </div>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
97 </body>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
98 <script> init(); </script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
99 </html>