Sujet Précédent Sujet Suivant

Mouse Drag and Drop

sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009 - 14 mai 2009 à 10:26
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 18 mai 2009 à 11:31
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

Réponse 1 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
15 mai 2009 à 16:16
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 ?
0
Réponse 2 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
15 mai 2009 à 18:38
salut
merciiii, ca marche ;)
oui uniquement vertical
0
Réponse 3 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
15 mai 2009 à 20:26
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
0
Réponse 4 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
16 mai 2009 à 09:55
ce que tu fais subir à l'un, fais le subir à l'autre.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
17 mai 2009 à 11:12
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?
0
Réponse 6 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
17 mai 2009 à 11:53
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 - ... ) !!
@+
0
Réponse 7 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
17 mai 2009 à 19:20
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?
0
Réponse 8 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
18 mai 2009 à 10:16
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
@+
0
Réponse 9 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
18 mai 2009 à 10:22
tu peux me dire comment je peux poster mon zip?
0
Réponse 10 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
18 mai 2009 à 10:32
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
0
Réponse 11 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
18 mai 2009 à 10:36
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>
0
Réponse 12 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
18 mai 2009 à 11:10
bah.... je ne vois nulle part où tu touches à la 2ème image ????
joue sur les positions de id="cot" et id="cot1"
0
Réponse 13 / 14
sonialand Messages postés 26 Date d'inscription mardi 7 avril 2009 Statut Membre Dernière intervention 12 août 2009
18 mai 2009 à 11:26
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
0
Réponse 14 / 14
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
18 mai 2009 à 11:31
>>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.
0

Discussions similaires

Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag Drop de fichiers
Popolino69 -
Frederyck -

3 réponses
drag and drop d'une image d'une page web lancée depuis un webbroswer
chrisledeveloppeur -
chrisledeveloppeur -

6 réponses
evenment clic + drag and drop sur une pictureBox
mimi2610 -
mimi2610 -

6 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
Rejoignez-nous