Mouse Drag and Drop

Signaler
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009
-
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
-
salut tout le monde,
J'ai trouvé un code sur internet que j'ai modifié un peu pour faire le mouse drag and drop d'un element.
mais le probleme c'est que je veux limiter le mouvement entre deux lignes pour que l'element ne depasse pas la fenetre!
Merci pour votre aide :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Drag and Drop</title>

<style type="text/css">
.dragclass{
position : relative;
cursor : move;
}
</style>

<script type="text/javascript">
if  (document.getElementById){

(function()
{

var n = 500;
var dragok = false;
var y,d,dy;

function move(e)
{
    if (!e)
    e = window.event;
    if (dragok)
    {
        d.style.top  = dy + e.clientY - y + "px";
        return false;
    }
}

function down(e)
{
    if (!e)
        e = window.event;
    var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
    if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass")
        temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
 
    if (temp.className == "dragclass")
    {
        dragok = true;
        temp.style.zIndex = n++;
        d = temp;
        dy = parseInt(temp.style.top+0);
        y = e.clientY;
        document.onmousemove = move;
        return false;
    }
}

function up()
{
    dragok = false;
    document.onmousemove = null;
}

document.onmousedown = down;
document.onmouseup = up;

})();
}
</script>

</head>

</html>

14 réponses

Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
bonjour,
et ben ?
avant de faire : d.style.top = dy + e.clientY - y + "px";
tu contrôles que la nouvelle position ( dy + e.clientY - y )
convienne, non ?
@+
au fait déplacement uniquement vertical ?
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

salut
merciiii, ca marche ;)
oui uniquement vertical
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

en fait jai un autre petit problem
en plus de cet objet, je veux tirer un autre objet de la meme forme que j'ai mis dans la meme position sachant qu'il est situé dans le premier plan (z-index: 0)
-->les deux objets doivent se tirer au meme temps pour que je les mette ds la meme position
merci en avance
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
ce que tu fais subir à l'un, fais le subir à l'autre.
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

merci pour la réponse.
mais j'arrive pas à faire bouger mon objet! en fait j'ai un autre objet dans le 2eme plan avec z-index: 1.
et le truc c'est que je ne veux bouger que ceux qui sont en premier et dernier plan, celui du mileu ne doit pas bouger!
je crois que la meilleure solution c'est de lier les deux objets (ils sont identiques), c'est faisable? si oui comment?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
de la même manière que tu fais le déplacement pour ton 1er objet
        d.style.top  = dy + e.clientY - y + "px"; ( je pense )
pour l'autre
        ??? .style.top  = nouvelle position
        position objet 2 = position objet 2 +
                                  ( position de la souris - position du 1er objet avant déplacement )
        quelque chose "comme ça", mais pas loin si c'est faux ( + ou - ... ) !!
@+
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

non ca fonctionne tjr pas :S
d'une facon generale, comment on peut lier deux objets appartenants a differents plans? seulement en leur attribuant les meme fonctions ou il faut faire autre chose?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
on ne lit pas 2 objets, ça ne veut pas dire grand chose
tu dois ne pas faire tout à fait ce qu'il faudrait, c'est sûr.
met nous l'essentiel ( le nécessaire, tout le nécessaire,
mais juste le nécessaire ! ) pour qu'on puisse tester
@+
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

tu peux me dire comment je peux poster mon zip?
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
tu ne peux pas !... et personne ne regarderait !
poste l'essentiel comme demandé.
le js tel qu'il est et les 2 images du html, ça suffit
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

bon voila le code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mytest</title>
<style type="text/css">
.dragclass{
position : relative;
cursor: move;
cursor: default;
}
</style>
</head>

<script language="JavaScript">
position1=50;
position2=50;
position3=425;
var mov;
function move_down()
{
    mov = position1;
    if (movposition2)
    {
        mov -=10;
        position1=position1-10;
    }
    else if (movposition1) && (((dy + e.clientY) - y)position1) && (((dy + e.clientY) - y)

       
       
   
       
       
       
       
       

</html>
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
bah.... je ne vois nulle part où tu touches à la 2ème image ????
joue sur les positions de id="cot" et id="cot1"
Messages postés
26
Date d'inscription
mardi 7 avril 2009
Statut
Membre
Dernière intervention
12 août 2009

oui j'ai supprimé le code car ca n'a pas marché!
je ne veux pas toucher 'cot1' (c'est une image .gif avec une zone transparente qui me permet de voir une partie de 'cot'). Je veux just deplacer 'cot' avec la 'dragclass'.
en fait l'idee de mettre la 'dragclass' etait pout bouger la 'cot' puisque je peux pas deplacer un objet placé à l'arrière plan, maintenant que j'arrive à deplacer la 'dragclass', il faut la lier avec 'cot' pour pouvoir la deplacer!
c'est assez clair comme ca?
merci
Messages postés
4933
Date d'inscription
samedi 1 juillet 2006
Statut
Membre
Dernière intervention
2 février 2015
9
>>je ne veux pas toucher 'cot1'
??? sans toucher tu ne pourras pas déplacer !
>>c'est assez clair comme ca?
tu te compliques la vie...
fais un "glisser/déplacer" classique, en jouant sur 2 images
      au lieu d'une seule.