Fonction drag en JS
Résolu
Atropa
Messages postés
2051
Statut
Membre
-
Atropa Messages postés 2051 Statut Membre -
Atropa Messages postés 2051 Statut Membre -
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
A voir également:
- Fonction drag en JS
- Fonction si et - Guide
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Fonction remplacer sur word - Guide
- Cette fonction n'est pas disponible actuellement tv lg - Forum Téléviseurs
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>
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>