arreter une fonction

**moudz** · 30/05/2008, 18h42

salut tout le monde, voila mon probleme:

a un moment dans mon code je fais cela

Code :

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

1
2
3
 
var tableDnDStep = new TableDnD();
tableDnDStep.init(document.getElementById('listeStepTask'));

ce code appel la methode "init" qui me permet d'applique le drag and drop sur une table

apres dans mon code j'ai un boutton, j'aimerait arreter la methode d'avant quand je clique sur ce boutton (je puisse plus appliquer le drag and drop)

la methode init crée une sorte de classe que j'ai fait, et attent des evennement de la souri sur le tableau

helllppp plzz :-)

**@Ikey** · 30/05/2008, 22h01

C'est simple tu fais une fonction stop en mettant l'événement associé à l'id à vide ou null

**le_chomeur** · 31/05/2008, 11h09

+1 mais a mon avis tu utilises des listeners qu'il faut relacher

montre nous ton code complet ...

**moudz** · 02/06/2008, 11h57

C'est simple tu fais une fonction stop

justement j'arrive pas ale faire... en fait je vais expliquer un peu plus mon probleme.

j'ai creer une classe nomé "TableDnD", a un moment dans le fichier javascript, je fais cela:

Code :

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

1
2
3
4
document.onmousemove = function(ev)
{
code
}

et donc ladedans je met presque tout mon code.. ceci capture tout les evennement..

ce que je souhaite faire: detruire l'instance tableDnDStep (voir mon premier post) quand je clic sur un boutton, et si cela n'est pas possible, arreter ce que j'ai citer juste en haut..

je vous donne ma fonction init au cas ou vous voulez la voir..

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
 
 this.init = function(table , id ) 
	{
		idscenario = id;
        this.table = table;
        var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
        for (var i=0; i<rows.length; i++) 
		{
			var nodrag = rows[i].getAttribute("NoDrag")
			if (nodrag == null || nodrag == "undefined") 
			{ 
				this.makeDraggable(rows[i]);
			}
        }
    }

j'espere que vous avez une solution sinon je suis dans la mxxde

**le_chomeur** · 02/06/2008, 14h24

je me permet de te soumettre ce script ( qui est de moi ^^ )
te permettant de gérer des objets en drag and drop :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
.boiteBleu{
background-color:#C1D8E8;
width:300px;
height:300px;
}
.boiterouge{
background-color:red;
width:150px;
height:150px;
}
.drag{
border:2px dashed #F1CEC5;
cursor:move;
}
</style>
<script type="text/javascript">
/*script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
*/
var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
if(window.attachEvent){
document.onmousedown = start;
document.onmousemove = drag;
document.onmouseup = drop;
}
else{
document.addEventListener("mousedown",start, false);
document.addEventListener("mousemove",drag, false);
document.addEventListener("mouseup",drop, false);
}
}
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Détection de l'élément sur lequel on a clické
monElement = (e.target)? e.target:e.srcElement;
if(monElement)
{
//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
getClassDrag(monElement);
if(myObjectClick){
positionXAtClick = e.clientX;
positionYAtClick = e.clientY;
positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
return false;
}
}
}
function drag(e){
//On initialise l'évènement s'il n'a aps été créé ( sous ie )
if(!e){
e = window.event;
}
//Si l'objet est déplaçable et qu'il existe
if(movable && myObjectClick){
myObjectClick.style.position = "absolute" ;
//On récupère la position de la souris par rapport à l'objet
myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
return false;
}
}
function drop(){
myObjectClick = null;
movable = false;
positionXAtClick = null;
positionYAtClick = null;
positionXMyobjectClick = null;
positionYMyobjectClick = null;
}
function getClassDrag(myObject){
with(myObject){
var x = className;
listeClass = x.split(" ");
//On parcours le tableau pour voir si l'objet est déplaçable
for(var i = 0 ; i < listeClass.length ; i++){
if(listeClass[i] == classMove){
movable = true;
myObjectClick = myObject;
}
}
}
}
window.onload = init_evenement;
</script>
</head>
<body>
<div class="boiteBleu drag"></div>
<div class="boiterouge drag"></div>
<div class="drag">et avec du contenu</div>
<div class="boiteBleu"></div>
<input type="text" class="drag" style="width:300px" />
<table width="50%" border="1" class="drag" style="border:10px dashed #FF00FF">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
 
</body>
</html>

particularité pour un tableau cliquer sur la bordure de celui ci pour le déplacer ( possibilité de faire évoluer le script

)
test et dis moi si cela te convient ?

**moudz** · 02/06/2008, 15h14

en fait ce que je voudrait faire est plutot comme ceci: cliquer

j'ai reussi a le faire, mais j'arrive pas a arreter le drag et drop sans recharger la page, ce qui est null... j'utilises tout le temps ajax pour ne pas recharger la page

ton scrip est pour deplacer des objet et les mettre dans toute la fenetre, ce qui peut etre modifier mais prendra du temps (alors que mon code est deja fait ^^)

mais je pense que pour ton code j'aurai le meme probleme, est ce que tu peut mettre un boutton , qd on clic dessu on ne peux plus bouger les table?

la solution a cela est de detruire une instace...
je pense que la solution pourra etre appliqué au 2 solutions...

**Matthieu2000** · 02/06/2008, 15h17

Code :

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

1
2
3
function stop(){
document.onmousemove =function(){void;}
}

**le_chomeur** · 02/06/2008, 15h31

ok tu t'étais mal exprimé , tu fais du drag and drop de cellule ! ( ou colonne

)

+1 pour la solution de matthieu

**moudz** · 02/06/2008, 15h34

merci a vous deux cela marche parfaitement

mais bon juste pour savoir (question supp

) est ce qu'il y a une façon pour detruire une instance??

**moudz** · 02/06/2008, 15h38

desolé pour le double post, j'ai trouvé cela pour ceux qui sont interessé et cela aussi marche:

Code :

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

delete tableDnDStep;

bonne aprem tout le monde

arreter une fonction

JavaScript

Discussions similaires

Partager

Partager