Mercurial Hosting > dad

comparison src/examples/handle.html @ 3:6d5e4b38b4fb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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>