curseur personnalisé en dehors de la fenêtre du navigateur

Question

J'ai un élément sur mon site qui est librement redimensionnable. Ceci est fait par 4 poignées sur les bords. En survolant ces poignées et en redimensionnant l'élément, je veux montrer les flèches de redimensionnement respectives.

Actuellement, j'ai implémenté ce comportement en définissant le style de curseur css du corps/racine à ces flèches. Le problème à ce sujet est la limite à la zone client de la fenêtre du navigateur. Ce serait visuellement plus cohérent et moins confus, si le curseur fléché serait visible partout alors que la souris est maintenue enfoncée. Google Maps fait la même chose avec le curseur de la main tout en déplaçant la carte. Donc, ma question est de savoir comment réaliser cet effet par moi-même.

Ma source de courant (pertinente):

function startObjectScaling(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    document.documentElement.style.cursor = this.style.cursor; 
    window.addEventListener("mouseup", stopObjectScaling, false); 
} 

function stopObjectScaling(e){ 
    e.stopPropagation(); 
    document.documentElement.style.cursor = ''; 
    window.removeEventListener("mouseup", stopObjectScaling); 
} 

[...] 

var tg = document.getElementById("transformGadget"); 
var handle = tg.firstChild.nextSibling; 
for(var i=0;i<4;i++){ 
    handle.addEventListener("mousedown", startObjectScaling, false); 
    handle = handle.nextSibling; 
} 

Answer 1

Une fonction spéciale est implémentée dans les navigateurs plus modernes à cet effet. Le nom est setCapture(). Il redirige toutes les entrées de la souris vers l'objet sur lequel la méthode a été appelée. Maintenant, un simple css curseur définition sur cet élément est suffisant pour archiver l'effet désiré. Après la libération de la souris, cet effet s'arrête (pour la sécurité à coup sûr). Il peut également être arrêté manuellement en appelant releaseCapture

exemple:

<style type="text/css"> 
#testObj { 
    /* this cursor will also stay outside the window. 
     could be set by the script at the mousedown event as well */ 
    cursor: hand; 
} 
</style> 

[...]

document.getElementById('testObj').onmousedown = function(e){ 

    // these 2 might be useful in this context as well 
    //e.stopPropagation(); 
    //e.preventDefault(); 

    // here is the magic 
    e.target.setCapture(); 
} 

Answer 2

si le curseur de la flèche serait visible partout alors que la souris est maintenez.

Vous comptez sur une anomalie du système d'exploitation pour créer votre comportement. Ce n'est pas quelque chose que vous pouvez ASSUME sera toujours vrai. Cependant, une fois que vous avez lancé un mousedown, le curseur à ce point restera normalement le même, peu importe où vous déplacez la souris, UNTIL autre chose (une autre fenêtre sur laquelle vous pouvez passer la souris? le curseur.

En d'autres termes, ne comptez pas sur ce comportement. Trouvez quelque chose d'autre qui fonctionnera pour vous. Si vous devez le faire, réexaminez les exigences de votre entreprise.