Mercurial Hosting > dad
comparison src/examples/drop.html @ 4:0130ae25ef94
add drop
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Sat, 22 Apr 2023 21:17:53 -0600 |
parents | |
children | 1293cb0d30da |
comparison
equal
deleted
inserted
replaced
3:6d5e4b38b4fb | 4:0130ae25ef94 |
---|---|
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 span[handle] { | |
10 display: inline-block; | |
11 background-color: LightGreen; | |
12 padding: 8px; | |
13 } | |
14 span[outer] { | |
15 display: inline-block; | |
16 background-color: LightBlue; | |
17 padding: 8px; | |
18 position: relative; | |
19 } | |
20 </style> | |
21 <script src="/dad.js"></script> | |
22 <script> | |
23 dad.whatToDrag = function(draggable) { | |
24 return draggable.parentNode; | |
25 }; | |
26 | |
27 dad.onDrop = function(event) { | |
28 let draggable = event.draggable; | |
29 let style = draggable.style; | |
30 let left = style.left ? parseInt(style.left) : 0; | |
31 let top = style.top ? parseInt(style.top) : 0; | |
32 let rectDragged = event.dragged.getBoundingClientRect(); | |
33 let rectDraggable = draggable.getBoundingClientRect(); | |
34 left += rectDragged.x - rectDraggable.x; | |
35 top += rectDragged.y - rectDraggable.y; | |
36 style.left = left + 'px'; | |
37 style.top = top + 'px'; | |
38 }; | |
39 | |
40 function init() { | |
41 let span = document.querySelector('span[handle]'); | |
42 dad.setDraggable(span); | |
43 } | |
44 </script> | |
45 </head> | |
46 <body> | |
47 <h1>Handle</h1> | |
48 <p> | |
49 <span outer> | |
50 <span handle>drag me</span> | |
51 along for the ride | |
52 </span> | |
53 </p> | |
54 <p>bottom</p> | |
55 </body> | |
56 <script> init(); </script> | |
57 </html> |