Mercurial Hosting > dad

comparison src/examples/nested.html @ 20:0b3376e13e22 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add nested example
author Franklin Schmidt <fschmidt@gmail.com>
date Tue, 18 Feb 2025 17:23:17 -0700
parents src/examples/list2.html@969d5980b375
children
comparison
equal deleted inserted replaced
19:dac260018e2e 20:0b3376e13e22
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 [drop] {
10 margin-top: 8px;
11 margin-bottom: 8px;
12 }
13 [drag] {
14 background-color: LightGreen;
15 padding: 8px;
16 display: inline-block;
17 }
18 </style>
19 <script src="/dad.js"></script>
20 <script>
21 function indexOf(a,el) {
22 for( let i=0; i<a.length; i++ ) {
23 if( a[i] === el )
24 return i;
25 }
26 return -1;
27 }
28
29 dad.whatToDrag = function(draggable) {
30 return draggable.parentNode;
31 };
32
33 dad.onEnter = function(event) {
34 let dropzone = event.dropzone;
35 let original = event.original;
36 let filter = original.getAttribute('drop');
37 if( dropzone.getAttribute('drop') !== filter ) {
38 return false;
39 }
40 let items = document.querySelectorAll(`[drop="${filter}"]`);
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('[drop]');
49 for( let item of items ) {
50 dad.setDropzone(item);
51 let filter = item.getAttribute('drop');
52 let drag = item.querySelector(`[drag="${filter}"]`);
53 dad.setDraggable(drag);
54 }
55 }
56 </script>
57 </head>
58 <body>
59 <h1>Nested Dynamic Lists</h1>
60 <ul>
61 <script>
62 for( let i=1; i<=5; i++ ) {
63 document.write(`
64 <li drop="top">${i} - <span drag=top>drag me</span>
65 <ul>
66 ` );
67 for( let j=1; j<=i; j++ ) {
68 document.write(`
69 <li drop="n${i}">${j} - <span drag="n${i}">drag me</span>
70 ` );
71 }
72 document.write(`
73 </ul>
74 </li>
75 ` );
76 }
77 </script>
78 </ul>
79 <p>bottom</p>
80 </body>
81 <script> init(); </script>
82 </html>