Mercurial Hosting > dad

comparison src/examples/list2.html @ 8:969d5980b375

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add lists
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 23:55:37 -0600
parents
children
comparison
equal deleted inserted replaced
7:332d3e280f7e 8:969d5980b375
1 <!doctype html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 @import "/site.css";
7 @import "/dad.css";
8
9 [item] {
10 background-color: LightGreen;
11 padding: 8px;
12 }
13 </style>
14 <script src="/dad.js"></script>
15 <script>
16 function indexOf(a,el) {
17 for( let i=0; i<a.length; i++ ) {
18 if( a[i] === el )
19 return i;
20 }
21 return -1;
22 }
23
24 dad.onEnter = function(event) {
25 let dropzone = event.dropzone
26 let original = event.original
27 let items = document.querySelectorAll('[item]');
28 let iDropzone = indexOf(items,dropzone);
29 let iOriginal = indexOf(items,original);
30 let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend';
31 dropzone.insertAdjacentElement(where,original);
32 };
33
34 function init() {
35 let items = document.querySelectorAll('[item]');
36 for( let i=0; i<items.length; i++ ) {
37 let item = items[i];
38 dad.setDraggable(item);
39 dad.setDropzone(item);
40 }
41 }
42 </script>
43 </head>
44 <body>
45 <h1>Dynamic List</h1>
46 <script>
47 for( let i=1; i<=10; i++ ) {
48 document.write(`
49 <p item>${i} - drag me</p>
50 ` );
51 }
52 </script>
53 <p>bottom</p>
54 </body>
55 <script> init(); </script>
56 </html>