Mercurial Hosting > dad
comparison src/examples/handle.html @ 3:6d5e4b38b4fb
start drag
author | Franklin Schmidt <fschmidt@gmail.com> |
---|---|
date | Fri, 21 Apr 2023 00:58:31 -0600 |
parents | |
children | 332d3e280f7e |
comparison
equal
deleted
inserted
replaced
2:264646feb67b | 3:6d5e4b38b4fb |
---|---|
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 } | |
19 </style> | |
20 <script src="/dad.js"></script> | |
21 <script> | |
22 dad.whatToDrag = function(draggable) { | |
23 return draggable.parentNode; | |
24 }; | |
25 | |
26 function init() { | |
27 let span = document.querySelector('span[handle]'); | |
28 dad.setDraggable(span); | |
29 } | |
30 </script> | |
31 </head> | |
32 <body> | |
33 <h1>Handle</h1> | |
34 <p> | |
35 <span outer> | |
36 <span handle>drag me</span> | |
37 along for the ride | |
38 </span> | |
39 </p> | |
40 <p>bottom</p> | |
41 </body> | |
42 <script> init(); </script> | |
43 </html> |