essaye d'applique sur le mousenter sur le mousedown ...
essaye d'applique sur le mousenter sur le mousedown ...
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag![]()
Venez sur le Chat de Développez !
Finalement j'arrive à activer le drag&drop et faire un resize de mon image, par contre la désactivation du drag&drop quand on resize ne marche pas.. il reste plus grand chose..
C'est cette ligne la qui ne fait rien.. pourtant ma avriable idParent contient bien mon id (=id-draggable-1)
Code : Sélectionner tout - Visualiser dans une fenêtre à part $('#' + idParent).draggable('disable');
Voici le code global
Merci
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 $(function() { var bResize = false; var idParent = ''; var xDepart, yDepart; // agrandi/reduit l'element selectionne $('#div_canvas').mousemove(function(e) { var xNew, yNew; var xPlus = 1 var yPlus = 1 if(bResize == true){ xNew = e.pageX - this.offsetLeft; yNew = e.pageY - this.offsetTop; xPlus = xNew - xDepart; yPlus = yNew - yDepart; $('#' + idParent).width($('#' + idParent).width() + xPlus); $('#' + idParent).height($('#' + idParent).height() + yPlus); xDepart = xNew; yDepart = yNew; } }); // ré-active le drag&drop sur l'element père $('#div_canvas').mouseup(function() { $('#' + idParent).draggable('enable'); bResize = false; }); // annule tout si on sors de la zone $('#div_canvas').mouseleave(function() { $('#div_canvas').mouseup(); $('.draggable').mouseup(); }); $("#div_canvas").on("mousedown", ".resize", function(e){ idParent = $(this).parents("div")[0].id; $('#' + idParent).draggable('disable'); xDepart = e.pageX - $('#div_canvas').offsetLeft; yDepart = e.pageY - $('#div_canvas').offsetTop; bResize = true; }); $("#div_canvas").on("mouseenter", ".draggable", function(e){ $(this).draggable(); }); $("#div_canvas").on("mousedown", ".draggable", function(e){ $(this).addClass('img-draggable-contour'); }); $("#div_canvas").on("mouseup", ".draggable", function(e){ $(this).removeClass('img-draggable-contour'); }); }); // ajout un nouvel obet sur le canvas function ajouter_image(nom_image){ nbrImage = nbrImage + 1; $('#div_canvas').append('<div id="id-draggable-' + nbrImage + '" class="div-draggable draggable unselectable"><img class="img-objet" src="img/arbre_1.png" /><div id="id-resize-' + nbrImage + '" class="resize"></div></div>'); }
j'ai déja rencontré des soucis avec des - dans des ids ...
j'avais du les remplacer par des underscores
Ma page Developpez - Mon Blog Developpez
Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
Votre post est résolu ? Alors n'oubliez pas le Tag![]()
Venez sur le Chat de Développez !
Même problème avec les underscores..
Je pensais que je repassait la dedans et que du coup ca me réactive le drag&drop, mais on dirais que non..
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3 $("#div_canvas").on("mouseenter", ".draggable", function(e){ $(this).draggable(); });
Si cela peut vous aider, voici une démo.
http://rammsteintrade.com/test_dev/
Après un clic sur l'image a droite, le carré bleu sert au resize..![]()
Bonjour,
J'ai refaits plusieurs test sur ce code:
Et avec une modification sur celui ci:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9 $("#div_canvas").on("mousedown", ".resize", function(e){ idParent = $(this).parents("div")[0].id; $('#' + idParent).draggable('disable'); xDepart = e.pageX - $('#div_canvas').offsetLeft; yDepart = e.pageY - $('#div_canvas').offsetTop; bResize = true; });
Je passe bien dedans à chaque clic sur un div ayant la class resize, la variable idParent contient bien l'id "père", pour le 1er il s'agit de id_draggable_1.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 $("#div_canvas").on("mouseenter", ".draggable", function(e){ if(bResize == false){ $(this).draggable(); } });
Du coup le resize de mon div "père" commence et cela fonctionne, c'est vraiment cette ligne la qui n'a aucun impact..
Merci pour votre aide
Code : Sélectionner tout - Visualiser dans une fenêtre à part $('#' + idParent).draggable('disable');
Dernière modification par Bovino ; 24/02/2013 à 17h05. Motif: Réduction d'indentation : merci de penser à ceux qui lisent le code...
Après modifications j'ai ceci mais pas mieux... toujours cette désactivation du draggable qui ne fonctionne pas.. :'(
Merci
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 $(function() { var bResize = false; var idParent = ''; var xDepart, yDepart; // agrandi/reduit l'element selectionne $('#div_canvas').mousemove(function(e) { var xNew, yNew; var xPlus = 1 var yPlus = 1 if(bResize == true){ xNew = e.pageX - this.offsetLeft; yNew = e.pageY - this.offsetTop; xPlus = xNew - xDepart; yPlus = yNew - yDepart; $('#' + idParent).width($('#' + idParent).width() + xPlus); $('#' + idParent).height($('#' + idParent).height() + yPlus); xDepart = xNew; yDepart = yNew; } }); // ré-active le drag&drop sur l'element père $('#div_canvas').mouseup(function() { console.log('disable=' + idParent); $('#' + idParent).draggable('enable'); bResize = false; }); // annule tout si on sors de la zone $('#div_canvas').mouseleave(function() { $('#div_canvas').mouseup(); $('.draggable').mouseup(); }); $("#div_canvas").on("mousedown", ".draggable", function(e){ $(this).draggable(); $(this).addClass('img_draggable_contour'); }); $("#div_canvas").on("mousedown", ".resize", function(e){ idParent = $(this).parents("div")[0].id; console.log('disable=' + idParent); $('#' + idParent).draggable('disable'); xDepart = e.pageX - $('#div_canvas').offsetLeft; yDepart = e.pageY - $('#div_canvas').offsetTop; bResize = true; }); $("#div_canvas").on("mouseup", ".draggable", function(e){ $(this).removeClass('img_draggable_contour'); }); }); // ajout un nouvel obet sur le canvas function ajouter_image(nom_image){ nbrImage = nbrImage + 1; $('#div_canvas').append('<div id="id_draggable_' + nbrImage + '" class="div_draggable draggable unselectable"><img class="img_objet" src="img/arbre_1.png" /><div id="id_resize-' + nbrImage + '" class="resize"></div></div>'); }
Partager