• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<html>
2<head>
3<title>Draggable Regions Test</title>
4<style>
5html, body {
6  height: 100%;
7  overflow: hidden;
8}
9.draggable-title {
10  -webkit-app-region: drag;
11  position: absolute;
12  top: 0px;
13  left: 0px;
14  width: 100%;
15  height: 34px;
16  background-color: white;
17  opacity: .5;
18}
19.content {
20  margin-top: 34px;
21  background-color: white;
22}
23.draggable {
24  -webkit-app-region: drag;
25  position: absolute;
26  top: 125px;
27  left: 50px;
28  width: 200px;
29  height: 200px;
30  background-color: red;
31}
32.nondraggable {
33  -webkit-app-region: no-drag;
34  position: absolute;
35  top: 50%;
36  left: 50%;
37  transform: translate(-50%, -50%);
38  width: 50px;
39  height: 50px;
40  background-color: blue;
41}
42</style>
43</head>
44<body>
45  <div class="draggable-title"></div>
46  <div class="content">
47  Draggable regions can be defined using the -webkit-app-region CSS property.
48  <br/>In the below example the red region is draggable and the blue sub-region is non-draggable.
49  <br/>Windows can be resized by default and closed using JavaScript <a href="#" onClick="window.close(); return false;">window.close()</a>.
50  </div>
51  <div class="draggable">
52    <div class="nondraggable"></div>
53  </div>
54</body>
55</html>