annotate src/examples/list2.html @ 9:eee8862be4c7

update text
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 28 Apr 2023 21:07:17 -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 </style>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
14 <script src="/dad.js"></script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 <script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 function indexOf(a,el) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17 for( let i=0; i<a.length; i++ ) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18 if( a[i] === el )
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 return i;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21 return -1;
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 dad.onEnter = function(event) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25 let dropzone = event.dropzone
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26 let original = event.original
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
27 let items = document.querySelectorAll('[item]');
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
28 let iDropzone = indexOf(items,dropzone);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 let iOriginal = indexOf(items,original);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30 let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend';
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 dropzone.insertAdjacentElement(where,original);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
32 };
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
34 function init() {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
35 let items = document.querySelectorAll('[item]');
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
36 for( let i=0; i<items.length; i++ ) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
37 let item = items[i];
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
38 dad.setDraggable(item);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
39 dad.setDropzone(item);
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
42 </script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
43 </head>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
44 <body>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
45 <h1>Dynamic List</h1>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
46 <script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
47 for( let i=1; i<=10; i++ ) {
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
48 document.write(`
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
49 <p item>${i} - drag me</p>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
50 ` );
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
51 }
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
52 </script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
53 <p>bottom</p>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
54 </body>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
55 <script> init(); </script>
969d5980b375 add lists
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
56 </html>