https://stackoverflow.com/a/13407898/3703461
I've had a look at this code, and found a very peculiar occurrance to it.
I've made it into a pluggable format into jQuery as such:
$.fn.unselectableCSS = function(){
var style = document.createElement('style');
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
var css = '.unselectable {\r\n'+
'-moz-user-select:none;\r\n'+
'-webkit-user-select:none;\r\n'+
'-ms-user-select:none;\r\n'+
'user-select:none;\r\n'+
'-webkit-user-drag:none;\r\n'+
'user-drag:none;\r\n'+
'}\r\n';
$(style).html(css);
}
$.fn.unselectable = function(){
$(this).addClass('unselectable')
.attr('unselectable','on')
.attr('draggable','false')
.on('dragstart',function(){return false;});
$(this).find( '*' )
.attr( 'draggable', 'false' )
.attr( 'unselectable', 'on' );
}
$(document).ready(function(){
$(document).unselectableCSS();
$('img').unselectable();
});
And it works perfectly! Except under one circumstance (so far)
If an image is clicked through a before/after element (in this case a before element with a background image) the image behind it becomes draggable again! (sometimes this happens right away, sometimes quite a few clicks are needed)
Any ideas what could have caused this?