annotate src/alternatives/interactjs.html @ 19:dac260018e2e default tip

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 15 Sep 2024 08:15:23 -0600
parents eee8862be4c7
children
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) {
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 1
diff changeset
46 //return;
1
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
47 console.log(event);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
48 let entered = event.target;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
49 let dragging = event.relatedTarget;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
50 if( entered === dragging )
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
51 return;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
52 let divs = document.querySelectorAll('div[drag]');
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
53 let iEntered = indexOf(divs,entered);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
54 let iDragging = indexOf(divs,dragging);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
55 console.log(iDragging+' '+iEntered);
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
56 let parent = entered.parentNode;
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
57 if( iDragging < iEntered ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
58 let next = divs[iEntered+1];
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 if( next ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
60 parent.insertBefore( dragging, next );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
61 } else {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
62 parent.appendChild( dragging );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
63 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
64 } else {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
65 parent.insertBefore( dragging, entered );
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
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
69 function init() {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
70 let dad = interact('div[drag]');
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
71 dad.draggable({
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents: 1
diff changeset
72 autoScroll: true,
1
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
73 listeners: {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
74 start: dragStartListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
75 move: dragMoveListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
76 end: dragEndListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
77 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
78 });
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
79 dad.dropzone({
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
80 ondragenter: dragEnterListener,
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
81 });
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
82 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
83 </script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
84 </head>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
85 <body>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
86 <h1><a href="https://interactjs.io/">interact.js</a></h1>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
87
9
eee8862be4c7 update text
Franklin Schmidt <fschmidt@gmail.com>
parents: 3
diff changeset
88 <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. The file that one needs to include is <a href="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.js">interact.js</a>.</p>
1
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
89
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
90 <div>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
91 <script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
92 for( let i=1; i<=10; i++ ) {
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
93 document.write(`
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
94 <div drag id="${i}">${i} - drag me</div>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
95 ` );
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
96 }
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
97 </script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
98 </div>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
99 </body>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
100 <script> init(); </script>
9c372fce698a start alternatives
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
101 </html>