2012-03-09 11 views
7

Estoy construyendo un método de arrastrar y soltar, mediante consulta -onmousedown conduce a -onmousemove (arrastre) y luego -onmouseup (desenlaza onmousemove)arrastrar y soltar, ¿evitar resaltar incómodo?

el problema es, por defecto del navegador comenzar destacando onmousemove, que vuela en todo la página y cancela el evento, dejándolo inutilizable. Alguna idea de cómo prevenir el resaltado, para prevenir. Por defecto, parece no estar funcionando. aquí es mi código (sí, está muy descuidado, lo siento!)

$(".middleRow").mousedown(function(){ 
calculateSelection(); 

    $('body').append('<div class="messageDrag" style="display:block">'+numSelected+'<div  style="font-size: 18px">messages</div></div>'); 


$(document).mouseup(function(){ 

     $('.messageDrag').fadeOut(500); 

     setTimeout(function(){ 
     $('.messageDrag').remove(); 
     }, 500); 


     $(document).unbind(); 


    }) 


$(document).mousemove(function(e){ 


    e.preventDefault(); 


    var x = e.pageX; 
    var y = e.pageY; 
    $(".messageDrag").css("left", x-49); 
    $(".messageDrag").css("top", y-49); 


}); 

}); 

Respuesta

12

Usted puede desactivar el resaltado usando css

-webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
-o-user-select: none; 
user-select: none; 

otra forma de hacer esto es para borrar la selección en caso de caída, como tan:

function clearSelection() { 
    var sel; 
    if(document.selection && document.selection.empty){ 
     document.selection.empty() ; 
    } else if(window.getSelection) { 
     sel = window.getSelection(); 
     if(sel && sel.removeAllRanges) 
     sel.collapse(); 
    } 
} 

Así que llamarían clearSelection() el evento de colocación (después de finalizada la resistencia aerodinámica)

+0

no quiero eliminar completamente el resaltado, solo durante este estado de arrastre. pero podría lanzar este CSS a través de una consulta como tal, ¿tiene esto compatibilidad total con el navegador? – roozbubu

+0

sí debería cubrir la mayoría de los navegadores modernos (de ahí todos los prefijos de proveedor, incluso ms), podría hacer '$ (elemento) .css ({// el css anterior});' cuando se inicialice el arrastre, y establecerlos en ' auto' una vez que la gota está hecha. –

+0

hmm ... esto no parece prevenir el resaltado, simplemente se deshace de él visualmente. el problema más grande fue el acto de resaltar (cuando el usuario comienza a arrastrar sobre el texto, se resalta, o si al principio arrastra sobre él, cancela el arrastre y comienza a resaltar) y está arruinando la función de arrastrar y soltar. – roozbubu

2

agregar css

-webkit-touch-callout: none;/*for mobile*/ 
-webkit-user-select: none;/*for chrome*/ 
-khtml-user-select: none;/*for safari*/ 
-moz-user-select: none;/*for Mozilla*/ 
-ms-user-select: none;/*for mircosoft*/ 
-o-user-select: none;/*for opera*/ 
user-select: none;/*base css ,but not work in all browsers*/