OLD | NEW |
(Empty) | |
| 1 <h2 id="draggable">A note on draggable window areas</h2><p> |
| 2 |
| 3 <p> |
| 4 Windows can be moved by dragging on the default title bar, |
| 5 but frameless windows do not have that affordance. |
| 6 The CSS property <code>-webkit-app-region</code> can be given the values |
| 7 <code>drag</code> and <code>no-drag</code> to allow content of a window |
| 8 to create draggable areas. Care must be taken when setting a high level |
| 9 DOM node to drag, any child that is intractable/clickable must be set to |
| 10 no-drag. E.g. |
| 11 <p> |
| 12 |
| 13 <pre data-filename="window.html"> |
| 14 <div class='title-area'> |
| 15 A draggable area. <div class='title-button'>clickable button</div> |
| 16 </div> |
| 17 </pre> |
| 18 |
| 19 <pre data-filename="style.css"> |
| 20 .title-area { |
| 21 -webkit-app-region: drag; |
| 22 } |
| 23 .title-button { |
| 24 -webkit-app-region: no-drag; |
| 25 } |
| 26 </pre> |
| 27 |
| 28 <p> |
| 29 See the <a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/
samples/frameless-window">Frameless Window Sample</a> as an example. |
| 30 </p> |
| 31 |
OLD | NEW |