2024-11-03 00:05:52 -08:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
2024-11-03 06:49:27 -09:00
|
|
|
* {
|
|
|
|
|
color: whitesmoke;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button, input {
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
|
2024-11-03 00:05:52 -08:00
|
|
|
.drag-container {
|
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
|
background-color: cadetblue;
|
|
|
|
|
|
|
|
|
|
padding: 40px;
|
|
|
|
|
margin: 40px;
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>draggability test</h1>
|
|
|
|
|
|
|
|
|
|
<div class="drag-container">
|
|
|
|
|
<h2>can be dragged</h2>
|
|
|
|
|
|
|
|
|
|
<span>0</span> <br>
|
|
|
|
|
|
|
|
|
|
<input type="text" placeholder="type..." />
|
|
|
|
|
|
|
|
|
|
<button id="foo">cannot be clicked</button>
|
2025-01-17 03:23:37 -09:00
|
|
|
|
|
|
|
|
<button id="dbl2">can be doubleclicked</button>
|
2024-11-03 00:05:52 -08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<input type="text" placeholder="type..." />
|
|
|
|
|
|
|
|
|
|
<button id="bar">can be clicked</button>
|
2025-01-17 03:23:37 -09:00
|
|
|
<button id="dbl">can be doubleclicked</button>
|
2024-11-03 00:05:52 -08:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
window.onload = () => {
|
|
|
|
|
let counter = 0;
|
|
|
|
|
|
|
|
|
|
const foo = document.getElementById('foo');
|
|
|
|
|
const bar = document.getElementById('bar');
|
2025-01-17 03:23:37 -09:00
|
|
|
const dbl = document.getElementById('dbl');
|
|
|
|
|
const dbl2 = document.getElementById('dbl2');
|
2024-11-03 00:05:52 -08:00
|
|
|
const span = document.querySelector('span');
|
|
|
|
|
|
|
|
|
|
const inc = () => {
|
|
|
|
|
span.innerText = ++counter
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
foo.addEventListener('click', inc);
|
|
|
|
|
bar.addEventListener('click', inc);
|
2025-01-17 03:23:37 -09:00
|
|
|
dbl.addEventListener('dblclick', inc);
|
|
|
|
|
dbl2.addEventListener('dblclick', inc);
|
2024-11-03 00:05:52 -08:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
