Mercurial Hosting > dad
comparison src/examples/dropzones.html @ 6:4d699321068f
add dropzones
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sun, 23 Apr 2023 18:34:12 -0600 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
5:1293cb0d30da | 6:4d699321068f |
---|---|
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 [drag] { | |
10 display: inline-block; | |
11 background-color: LightGreen; | |
12 padding: 8px; | |
13 } | |
14 [dropzone] { | |
15 background-color: LightBlue; | |
16 padding: 8px; | |
17 } | |
18 [dropzone][in] { | |
19 border: 1px solid; | |
20 } | |
21 </style> | |
22 <script src="/dad.js"></script> | |
23 <script> | |
24 dad.onEnter = function(event) { | |
25 event.dropzone.setAttribute('in',''); | |
26 }; | |
27 | |
28 dad.onLeave = function(event) { | |
29 event.dropzone.removeAttribute('in'); | |
30 }; | |
31 | |
32 dad.onDrop = function(event) { | |
33 if( event.dropzone ) | |
34 event.dropzone.appendChild(event.original); | |
35 }; | |
36 | |
37 function init() { | |
38 let drag = document.querySelector('[drag]'); | |
39 dad.setDraggable(drag); | |
40 let dropzones = document.querySelectorAll('[dropzone]'); | |
41 for( let i=0; i<dropzones.length; i++ ) { | |
42 let dropzone = dropzones[i]; | |
43 dad.setDropzone(dropzone); | |
44 } | |
45 } | |
46 </script> | |
47 </head> | |
48 <body> | |
49 <h1>Dropzones</h1> | |
50 <p dropzone>dropzone 1 <span drag>drag me</span></p> | |
51 <p dropzone>dropzone 2 </p> | |
52 <p dropzone>dropzone 3 </p> | |
53 <p>bottom</p> | |
54 </body> | |
55 <script> init(); </script> | |
56 </html> |