Fonction drag en JS
Résolu
Atropa
Messages postés
1940
Date d'inscription
Statut
Membre
Dernière intervention
-
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
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
- Fonction filtre excel n'existe pas - Forum Excel
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>