PagePrincipale :: DerniersChangements :: ParametresUtilisateur :: Vous êtes

La page:

<title>Se servir de la main pour naviguer dans cette image, double-cliquer pour activer ses liens</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/javascript" language="JavaScript?" src="../../../accessoires/scripts/drag.js">

<script type="text/javascript" language="JavaScript?">

var cursorPositionX = -1;
var cursorPositionY = -1;

function clicked(e) {
cursorPositionX = e.screenX;
cursorPositionY = e.screenY;

function dragged(e) {
var deltaX = cursorPositionX - e.screenX;
var deltaY = cursorPositionY - e.screenY;
cursorPositionX = e.screenX;
cursorPositionY = e.screenY;
window.scrollBy(deltaX, deltaY);

<style type="text/css">
body {
background-color: #8ca523;
style="position:absolute; left:0px; top:0px; cursor:pointer;"
onMouseDown="beginDrag(this, event)"/>
onMouseDown="Javascript:clicked (interwiki)(event)"
onDrag="Javascript:dragged (interwiki)(event)"


Le javascript

* Adapted from
* JavaScript?: The Definitive Guide, 4th Edition
* By David Flanagan
* Edited by O'Reilly
* ISBN: 0-596-00048-0
* Drag.js:
* This function is designed to be called from a mousedown event handler.
* It registers temporary capturing event handlers for the mousemove and
* mouseup events that will follow and uses these handlers to "drag" the
* specified document element. The first argument must be an absolutely
* positioned document element. It may be the element that received the
* mousedown event or it may be some containing element. The second
* argument must be the event object for the mousedown event.
function beginDrag(elementToDrag, event) {
try {
Figure out where the element currently is
The element must have left and top CSS properties in a style attribute
Also, we assume they are set using pixel units
var x = parseInt(;
var y = parseInt(;

Compute the distance between that point and the mouse-click
The nested moveHandler function below needs these values
var deltaX = event.clientX - x;
var deltaY = event.clientY - y;

Register the event handlers that will respond to the mousemove
and mouseup events that follow this mousedown event. Note that
these are registered as capturing event handlers on the document.
These event handlers remain active while the mouse button remains
pressed and are removed when the button is released.
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
document.addEventListener("mouseout", upHandler, true);

We've handled this event. Don't let anybody else see it.
event.stopPropagation( );
event.preventDefault( );
} catch(e) {


* This is the handler that captures mousemove events when an element
* is being dragged. It is responsible for moving the element.
function moveHandler(event) {
Move the element to the current mouse position, adjusted as
necessary by the offset of the initial mouse-click = (event.clientX - deltaX) + "px"; = (event.clientY - deltaY) + "px";

And don't let anyone else see this event
event.stopPropagation( );

* This is the handler that captures the final mouseup event that
* occurs at the end of a drag
function upHandler(event) {
Unregister the capturing event handlers
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
And don't let the event propagate any further
event.stopPropagation( );

Il n'y a pas de commentaire sur cette page. [Afficher commentaires/formulaire]