Mercurial Hosting > dad

comparison src/examples/list.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 [item][in] {
14 border: 1px solid;
15 }
16 </style>
17 <script src="/dad.js"></script>
18 <script>
19 dad.onEnter = function(event) {
20 event.dropzone.setAttribute('in','');
21 };
22
23 dad.onLeave = function(event) {
24 event.dropzone.removeAttribute('in');
25 };
26
27 function indexOf(a,el) {
28 for( let i=0; i<a.length; i++ ) {
29 if( a[i] === el )
30 return i;
31 }
32 return -1;
33 }
34
35 dad.onDrop = function(event) {
36 let dropzone = event.dropzone
37 if( !dropzone )
38 return;
39 let original = event.original
40 let items = document.querySelectorAll('[item]');
41 let iDropzone = indexOf(items,dropzone);
42 let iOriginal = indexOf(items,original);
43 let where = iDropzone < iOriginal ? 'beforebegin' : 'afterend';
44 dropzone.insertAdjacentElement(where,original);
45 };
46
47 function init() {
48 let items = document.querySelectorAll('[item]');
49 for( let i=0; i<items.length; i++ ) {
50 let item = items[i];
51 dad.setDraggable(item);
52 dad.setDropzone(item);
53 }
54 }
55 </script>
56 </head>
57 <body>
58 <h1>List</h1>
59 <script>
60 for( let i=1; i<=10; i++ ) {
61 document.write(`
62 <p item>${i} - drag me</p>
63 ` );
64 }
65 </script>
66 <p>bottom</p>
67 </body>
68 <script> init(); </script>
69 </html>