annotate src/examples/handle.html @ 7:332d3e280f7e

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Sun, 23 Apr 2023 20:46:17 -0600
parents 6d5e4b38b4fb
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
1 <!doctype html>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
2 <html>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
3 <head>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1">
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 <style>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 @import "/site.css";
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
7 @import "/dad.css";
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
8
7
Franklin Schmidt <fschmidt@gmail.com>
parents: 3
diff changeset
9 [handle] {
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
10 display: inline-block;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
11 background-color: LightGreen;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
12 padding: 8px;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
13 }
7
Franklin Schmidt <fschmidt@gmail.com>
parents: 3
diff changeset
14 [outer] {
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 display: inline-block;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 background-color: LightBlue;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17 padding: 8px;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18 }
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 </style>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 <script src="/dad.js"></script>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21 <script>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22 dad.whatToDrag = function(draggable) {
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23 return draggable.parentNode;
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 };
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26 function init() {
7
Franklin Schmidt <fschmidt@gmail.com>
parents: 3
diff changeset
27 let handle = document.querySelector('[handle]');
Franklin Schmidt <fschmidt@gmail.com>
parents: 3
diff changeset
28 dad.setDraggable(handle);
3
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 }
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30 </script>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 </head>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
32 <body>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33 <h1>Handle</h1>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
34 <p>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
35 <span outer>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
36 <span handle>drag me</span>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
37 along for the ride
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
38 </span>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
39 </p>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 <p>bottom</p>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41 </body>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
42 <script> init(); </script>
6d5e4b38b4fb start drag
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
43 </html>