annotate src/examples/list.html @ 19:dac260018e2e default tip

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 15 Sep 2024 08:15:23 -0600
parents 969d5980b375
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
8
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
1 <!doctype html>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
2 <html>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
3 <head>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1">
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 <style>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 @import "/site.css";
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
7 @import "/dad.css";
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
8
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
9 [item] {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
10 background-color: LightGreen;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
11 padding: 8px;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
12 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
13 [item][in] {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
14 border: 1px solid;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 </style>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17 <script src="/dad.js"></script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18 <script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 dad.onEnter = function(event) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 event.dropzone.setAttribute('in','');
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21 };
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23 dad.onLeave = function(event) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 event.dropzone.removeAttribute('in');
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25 };
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
27 function indexOf(a,el) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
28 for( let i=0; i<a.length; i++ ) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 if( a[i] === el )
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30 return i;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
32 return -1;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
34
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
35 dad.onDrop = function(event) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
36 let dropzone = event.dropzone
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
37 if( !dropzone )
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
38 return;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
39 let original = event.original
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 let items = document.querySelectorAll('[item]');
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41 let iDropzone = indexOf(items,dropzone);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
42 let iOriginal = indexOf(items,original);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
43 let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend';
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
44 dropzone.insertAdjacentElement(where,original);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
45 };
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
46
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
47 function init() {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
48 let items = document.querySelectorAll('[item]');
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
49 for( let i=0; i<items.length; i++ ) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
50 let item = items[i];
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
51 dad.setDraggable(item);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
52 dad.setDropzone(item);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
53 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
54 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
55 </script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
56 </head>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
57 <body>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
58 <h1>List</h1>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 <script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
60 for( let i=1; i<=10; i++ ) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
61 document.write(`
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
62 <p item>${i} - drag me</p>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
63 ` );
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
64 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
65 </script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
66 <p>bottom</p>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
67 </body>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
68 <script> init(); </script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
69 </html>