Mercurial Hosting > dad
comparison src/examples/list.html @ 8:969d5980b375
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> |