Comment implémenter "la résistance de la souris" en javascript?

Question

J'ai besoin d'implémenter la résistance de la souris en javascript.

À titre d'exemple de ce que je veux dire, penser à la façon dont le gestionnaire de fenêtres Enligthenment gère la résistance de bord de l'écran pour basculer entre les différents postes de travail, ou si vous n'êtes pas familier avec ce:

imaginer un grand rectangle avec un carré à l'intérieur il. Lorsque vous déplacez la souris [onmousedown] dans le carré, la souris se déplace jusqu'à la limite du carré, puis exerce une certaine résistance jusqu'à ce qu'un seuil soit atteint, puis se déplace dans le plus grand rectangle.

Idéalement, le curseur de la souris doit rester coincé dans le carré jusqu'à ce que ce seuil ne soit pas atteint, et ne quitter cette zone que s'il est rencontré.

Des idées ou des exemples de cela quelque part? Une solution de crossbrowser est également grandement appréciée. (jusqu'à IE7, c'est-à-dire) Merci!

Answer 1

Comme indiqué, vous ne pouvez pas définir la position de la souris avec Javascript.

Puisque vous avez demandé comment implémenter ceci sur mousedown, cependant, je suppose que l'utilisateur fait glisser quelque chose à l'écran. Donc, vous pourriez avoir l'élément qu'ils traînent montrent ce comportement. Vous avez besoin de deux éléments pour agir en tant que régions, l'une où la cible peut être déplacée librement et l'autre pour définir la taille de la limite. Je le ferais avec jQuery pour raccourcir le code mais en gros vous auriez quelque chose comme ça. (Code non testé)

HTML:

<div class='borderLand'> 
    <div class='freeZone'> 
     <img class='draggable'> 
    </div> 
</div> 

CSS:

.borderLand {position: relative; width: 110px; height: 110px;} 
.freeZone {position: relative; top: 10px; left:10px; height: 100px; width: 100px;} 

JS:

Je ne peux pas écrire le code complet du haut de ma tête, mais l'algorithme serait être quelque chose comme

onmousedown{ 
    check for click location 
    if it's over the draggable (watch for bubbling) begin dragging, set dragging flag 
} 

onmouseup{ 
    clear dragging flag if it's set 
} 

borderland onmouseover{ 
    if dragging, stop the movement of the draggable (watch for bubbling here too) 
} 

borderland onmouseout{ 
    start dragging again (if they move back in or out it doesn't matter, you want to drag) 
} 

Désolé si vous avez besoin de plus de détails, mais le faire en JS serait un peu long et je ne sais pas de combien d'aide vous avez besoin.