How to disable -webkit-app-region: drag;?

Question

I have a chrome-app and I made the entire window draggable by adding -webkit-app-region: drag; to a div via a css class:

example:

<style>
    draggable {
        -webkit-app-region: drag;
    }
</style>

<div class='draggable'>
    hello world
</div>

The problem is that I cannot disable the dragging by removing the draggable class from the div(for example via jQuery or chrome-debugger). Besides this being a potential bug, are there any workarounds to stop the div from making the app window draggable?

FYI: I have checked this on Chrome(34.0.187.116), Chrome Beta(35.0.1916.69), Chrome Canary(36.0.1964.2) and all have the same behavior. OS: MacOS X 10.9.2

Answer 1

I found a workaround. By hiding the div via display: none the draggable can be disabled.

Answer 2

I'm currently building an application in electron (formerly atom-shell). Around the time of arriving to your question, I found a way to solve this and just like anything else, the answer is really simple.

Take this example as my instance and solution:

1) Your problem is that anything in the div block (including the div) will be draggable, and you lose some functionality (e.g. clicking though to links contained within), right?

<div style='-webkit-app-region:drag'>...</div>

If you want to have your anchors within that drag region:

<div style='-webkit-app-region:drag'>
<a href='index.html'>...</a>
<a href='about.html'>...</a>
</div>

Become clickable, all you need is do is exactly as you said:

I cannot disable the dragging

Disable the Dragging... And here's the code to prove it.

<a style="-webkit-app-region: no-drag;" href="index.html">...</a>

Not only does that stop drag capability on that element, it will also allow you to click through to events being prevented by webkit.

Answer 3

just use on those particular elements the rule -webkit-app-region:no-drag its all

Answer 4

-webkit-app-region:no-drag dont works so i just created a another div .drag-overlay-div{position:absolute; z-index:1000; -webkit-app-region:no-drag} now activating/deactivating this .drag-overlay-div using display:none/display:block