Fonction drag en JS
Résolu
Bonjour,
je suis en train de faire une fonction de glisser d'élément en js, elle fonctionne partout sauf sur firefox.
la premier fois que l'on clic sur l'élément ça marche le problème c'est que la seconde fois le curseur se change en interdiction et quand on relâche l'élément reste collé au curseur.
je ne comprend pas d'où vient l'erreur...
voilà le code complet de la page :
merci de votre aide
je suis en train de faire une fonction de glisser d'élément en js, elle fonctionne partout sauf sur firefox.
la premier fois que l'on clic sur l'élément ça marche le problème c'est que la seconde fois le curseur se change en interdiction et quand on relâche l'élément reste collé au curseur.
je ne comprend pas d'où vient l'erreur...
voilà le code complet de la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>TEST DRAG</title>
<script type="text/javascript">
<!--
function Drag(item){
var positionX = 0, positionY = 0;
var newPositionX = 0, newPositionY = 0;
var id = item;
var dimX = document.getElementById(id).offsetLeft;
var dimY = document.getElementById(id).offsetTop;
var test1 = true;
var test2 = true;
document.onmousemove = function (evenement) {
if(test1 == true) {
if(document.all) {
positionX = event.clientX;
positionY = event.clientY;
}
else {
positionX = evenement.pageX;
positionY = evenement.pageY;
}
if(test2 == true) {
dimX = positionX-dimX;
dimY = positionY-dimY;
test2 = false;
}
newPositionX = positionX-dimX;
newPositionY = positionY-dimY;
document.getElementById(id).style.left = newPositionX+"px";
document.getElementById(id).style.top = newPositionY+"px";
}
}
document.onmouseup = function (){
test1 = false;
}
}
//-->
</script>
<style type="text/css">
#dep {
position:absolute;
left:400px;
top: 100px;
width:75px;
height: 35px;
background-color:red;
}
</style>
</head>
<body>
<div id="dep" onmousedown="Drag('calque');"></div>
</body>
</html>
merci de votre aide
2 réponses
-
bonjour ^^
il faut spécifier au navigateur que tu ne veux pas déplacer l'élément vers une autres application ...
pour cela rajoute ces "fonctions" sur les éléments en question
onmousedown='return false;'
ondragstart='return false;'
dans ton exemple ça donne :
<div id="dep" onmousedown="Drag('dep'); return false;" onDragStart='return false;'></div> -
merci beaucoup,
j'ai mis return false a la fin de la fonction et onmousedown=" return Drag()" et c'est nikel
