Bonjour à toutes et à tous,
je fais un exercice sur les évènements qui fonctionne bien sur Internet Explorer 8.0 (je suis encore sous windows XP) et sous Firefox 11.0
Or à ma grande surprise, cela ne fonctionne pas sous opera 12.0, safari 5.1.5 et sous chrome 18.0. ? Et je ne sais pas pourquoi !
Qu'est-ce que j'ai oublié de faire ?
Voici le HTML :
Voici le CSS :
et pour terminer, le JAVASCRIPT :
@+
Modifié par Artemus24 (22 Apr 2012 - 16:36)
je fais un exercice sur les évènements qui fonctionne bien sur Internet Explorer 8.0 (je suis encore sous windows XP) et sous Firefox 11.0
Or à ma grande surprise, cela ne fonctionne pas sous opera 12.0, safari 5.1.5 et sous chrome 18.0. ? Et je ne sais pas pourquoi !
Qu'est-ce que j'ai oublié de faire ?
Voici le HTML :
<!DOCTYPE html>
<html>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Drag and Drop</title>
<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->
<script src="Script.js" type="text/javascript"></script>
<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>Cliquez et déplacer l'image ou le texte !</div>
<div><img class="drag" src="Images/world.jpg" /></div>
<div class="drag" id="text">texte</div>
</body>
</html>
Voici le CSS :
.drag {
position : relative;
cursor : move;
z-index : 1;
}
#text {
width : 40px;
font-size : xx-large;
font-weight : bolder;
}et pour terminer, le JAVASCRIPT :
window.onload = function ()
{
document.onmousedown = DragDrop.Down;
document.onmouseup = DragDrop.Up;
}
/*************************/
/* */
/* Drag and Drop */
/* */
/*************************/
DragDrop = {
startX : 0, /* position de départ de la souris */
startY : 0,
offsetX : 0, /* position de la cible */
offsetY : 0,
target : null, /* objet cible que l'on déplace */
zIndex : null, /* mettre l'objet par dessus */
/*===================================================*/
/* On Clic sur le bouton Gauche de la Souris */
/*===================================================*/
Down: function(e)
{
e = e || window.event;
this.target = e.target || e.srcElement;
if (this.target.nodeType == 3)
this.target = this.target.parentNode;
/*-----------------------------------------*/
/* Identification du Bouton Gauche */
/*-----------------------------------------*/
var test = false;
if (this.target.className == "drag")
{
test = (window.event) ? (e.button == 1) : (e.button == 0);
}
if (test)
{
/*-----------------------------*/
/* Position du Curseur */
/*-----------------------------*/
if (window.event)
{
this.startX = e.clientX;
this.startY = e.clientY;
}
else
{
this.startX = e.pageX;
this.startY = e.pageY;
}
/*------------------------------*/
/* Position de la cible */
/*------------------------------*/
this.offsetX = (this.target.style.left) ? parseInt(this.target.style.left) : 0;
this.offsetY = (this.target.style.top) ? parseInt(this.target.style.top) : 0;
/*-----------------------------------------*/
/* On met la cible au premier plan */
/*-----------------------------------------*/
this.zIndex = (this.target.style.zIndex) ? this.target.style.zIndex : 1;
this.target.style.zIndex = 100;
/*-----------------------------------------*/
/* */
/*-----------------------------------------*/
document.body.focus();
document.onmousemove = DragDrop.Move;
/*----------------------------------------*/
/* Spécifique à Internet Explorer */
/*----------------------------------------*/
if (document.all)
{
document.onselectstart = function () { return false; };
this.target.ondragstart = function () { return false; };
}
return false;
}
},
/*==================================================*/
/* On relache le bouton Gauche de la Souris */
/*==================================================*/
Up: function (e)
{
if (this.target)
{
if (document.all)
{
document.onselectstart = null;
this.target.ondragstart = null;
}
this.target.style.zIndex = this.zIndex;
document.onmousemove = null;
this.target = null;
}
},
/*==================================*/
/* Déplacement de la Souris */
/*==================================*/
Move: function (e)
{
e = e || window.event;
if (window.event)
{
var posX = e.clientX;
var posY = e.clientY;
}
else
{
var posX = e.pageX;
var posY = e.pageY;
}
this.target.style.left = (this.offsetX + posX - this.startX) + "px";
this.target.style.top = (this.offsetY + posY - this.startY) + "px";
}
};
@+
Modifié par Artemus24 (22 Apr 2012 - 16:36)
