Drag and Drop avec délimiteur :)

**le_chomeur** · 24/10/2008, 11h43

Voici un drag and drop que j'ai concu dans le cadre d'une autre application ( qui arrive bientôt => un tag a la facebook ! )
ce drag and drop permet de déplacer des éléments sans contrainte ( testé sous ie 6/7 firefox 3 ) mais aussi de limiter les déplacements dans un conteneur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Draggable{
    border:1px solid #666;
    background-color:#4C9294;
}
.inDrag{
    border:2px dashed #ED3C12;
    background-color:#4395BC;
}
</style>
<script type="text/javascript">
var Drag = {
 
    MyObj : null,
    MyObjToLimit : null,
 
    init : function(o,MyObjToLimit)
    {
        Drag.MyObj = o ;
        //Sauvegarde de la classe d'origine de l'objet
        Drag.MyObj.MyClassName = o.className;
        //On vérifit si l'objet est limité a un autre objet
        Drag.MyObj.MyObjToLimit = (MyObjToLimit != null) ? MyObjToLimit:null;
        //On assigne la méthode au click de la souris sur l'MyObjet
        Drag.MyObj.onmousedown    = Drag.start;
 
        //Si l'élément n'as pas de propriété let et top on lui en assigne par défault
        if (isNaN(parseInt(Drag.MyObj.style.left  ))) Drag.MyObj.style.left   = "0px";
        if (isNaN(parseInt(Drag.MyObj.style.top   ))) Drag.MyObj.style.top    = "0px";
 
        //Si l'on doit limiter le déplacement a une zone on calcul les points
        if(Drag.MyObj.MyObjToLimit){
                Drag.MyObj.minLeft = 0;
                Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
                Drag.MyObj.minTop = 0;
                Drag.MyObj.maxBottom = Drag.MyObj.minTop+Drag.MyObj.MyObjToLimit.offsetHeight;
        }
 
    },
 
    start : function(e)
    {
        Drag.MyObj = this;
        //On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
        e = Drag.GetEvent(e);
        //On affecte la classe InDrag
        Drag.MyObj.className = "inDrag";
        //On récupère l'endroit ou se trouve la souris par rapport a l'objet clické
        Drag.MyObj.ecartX = e.clientX - parseInt(Drag.MyObj.style.left);
        Drag.MyObj.ecartY = e.clientY - parseInt(Drag.MyObj.style.top);
        //On affecte les méthodes drag et end au évènement lié au document et non a l'MyObjet
        document.onmousemove    = Drag.drag;
        document.onmouseup        = Drag.end;
 
        return false;
    },
 
    drag : function(e)
    {
        //On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
        e = Drag.GetEvent(e);
        //Récupération de la position de la souris
        var curX = e.clientX;
        var curY = e.clientY;
 
        var newPosX = curX - Drag.MyObj.ecartX;
        var newPosY = curY - Drag.MyObj.ecartY;
 
        //Si l'élément les limités a  un conteneur
        if(Drag.MyObj.MyObjToLimit != null){
            document.getElementById('test').innerHTML =newPosX + " ecart : " + Drag.MyObj.ecartX + " position : " + curX;
            //Déplacement de l'objet
            if(newPosX < (Drag.MyObj.minLeft+5)){
                Drag.MyObj.style.left = Drag.MyObj.minLeft+5 + "px";
            }
            else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight-5)){
                Drag.MyObj.style.left = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth - 5 + "px";
            }
            else{
                Drag.MyObj.style.left = newPosX + 'px';
            }
 
 
            if(newPosY < (Drag.MyObj.minTop+5)){
                Drag.MyObj.style.top = Drag.MyObj.minTop + 5 + 'px';
            }
            else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom-5)){
                Drag.MyObj.style.top = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight - 5 +"px";
            }
            else{
                Drag.MyObj.style.top = newPosY + 'px';
            }
        }
        //Sinon déplacement normalement
        else{
            Drag.MyObj.style.top = newPosY + 'px';
            Drag.MyObj.style.left = newPosX + 'px';
        }
 
        return false;
    },
 
    end : function()
    {
        //On remet la classe de l'objet
        Drag.MyObj.className = Drag.MyObj.MyClassName;
        //On supprime les évènements liés au déplacement :)
        document.onmousemove = null;
        document.onmouseup   = null;
        //On détruit l'MyObjet
        Drag.MyObj = null;
    },
 
    GetEvent : function(e)
    {
        if (!e) e = window.event;
        return e;
    },
    findPos : function(obj){
        //position x / y de l'objet
        var x = obj.offsetLeft || 0;
        var y = obj.offsetTop || 0;
        //tant qu'il y a un parent, on ajoute la position de son parent
        while (obj = obj.offsetParent) {
            x += obj.offsetLeft
            y += obj.offsetTop
        }
        //Ici on retour x ou y ( ou les deux dans un tableau ou un hash
        return new Array(x,y);
    }
};
</script>
</head>
<body>
 
<div id="titi" style="width:500px;height:500px;border:1px solid #666">
<div id="debug" style="width:50px;height:50px;position:absolute" class="Draggable"> ici
</div>
</div>
<div id="test" style="width:200px;height:100px;position:absolute" class="Draggable">
</div>
 
<script type="text/javascript">
    Drag.init(document.getElementById('debug'),document.getElementById('titi'));
    Drag.init(document.getElementById('test'));
</script>
</body>
</html>

code ultra commenté avec exemple comme d'habitude

Invité · 25/10/2008, 00h01

Bonsoir,

Bien mieux ce code !
Sinon, le window.event n'est pas un bug, juste une différence de conception de Mr Bill.

A+

**le_chomeur** · 25/10/2008, 14h29

Mouai , moi je soutiens qu'il s'agit d'un bug ie , pourquoi un évènement passé en paramètre disparait-il ^^

**Auteur** · 25/10/2008, 17h53

ça me fait penser que ce "problème" a été évoqué dans cette discussion :
http://www.developpez.net/forums/d24...n/#post1871191

**bigboomshakala** · 20/11/2008, 13h42

Envoyé par le_chomeur

Mouai , moi je soutiens qu'il s'agit d'un bug ie , pourquoi un évènement passé en paramètre disparait-il ^^

un événement passé en paramètre disparaît parce que... il n'y a pas dévénement passé en paramètre avec IE

**le_chomeur** · 20/11/2008, 14h10

ha ben voila !
merci bbs

**bigboomshakala** · 20/11/2008, 14h16

IE compatible :
1. soit remplace les paramètres de fonctions "e" en "event" (certains diront que ce n'est pas propre et porte à confusion entre un paramètre qui s'appelerait event et l'événement IE event (alias window.event))
2. soit e = Drag.GetEvent(window.event || e);
3. notation différente : e = Drag.GetEvent(window.event ? window.event : e);

**le_chomeur** · 20/11/2008, 14h24

ben le problème est résolut , je recréer l'évènement

**uself** · 03/05/2009, 00h38

bonjour,
je relance un peu ce post, mais j'amerais savoir s'il y a une possibilité pour que la div (la grande en fond) puisse ne pas avoir de marge.
J'essaie de la coller en haut à gauche.

Merci

Edit : j'ai trouvé, il suffit de rajouter des margin en css
merci quand même

Drag and Drop avec délimiteur :)

Contribuez

Discussions similaires

Partager

Partager