Evitar la selección en HTML

Tengo un div en una página HTML y cada vez que presiono el mouse y lo muevo, mostrará que el cursor "no puede soltar" como si seleccionara algo. ¿Hay alguna forma de desactivar la selección? Probé la selección de usuario de CSS sin éxito.

Las variaciones propietarias de user-selectfuncionarán en la mayoría de los navegadores modernos:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Para IE <10 y Opera, deberá usar el unselectableatributo del elemento que desea que no sea seleccionable. Puede configurar esto usando un atributo en HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Lamentablemente, esta propiedad no se hereda, lo que significa que debe colocar un atributo en la etiqueta de inicio de cada elemento dentro de <div>. Si esto es un problema, puede usar JavaScript para hacer esto de forma recursiva para los descendientes de un elemento:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Parece que la selección de usuario de CSS no impide que la imagen se arrastre y suelte ... así que ...

HTML:

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS:

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

JS:

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});

Utilizo cancelBubble=truey stopPropagation()en el mouse hacia abajo y muevo manejadores.

event.preventDefault() parece hacer el truco (probado en IE7-9 y Chrome):

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});

¿Tiene algún tipo de imagen transparente que está seleccionando? Por lo general, el icono de "no se puede soltar" aparece cuando arrastra una imagen. De lo contrario, normalmente selecciona texto cuando lo arrastra. Si es así, es posible que tenga que poner la imagen detrás de todo usando z-index.