Div dynamique hérite pas du JS

Version imprimable

Voir 40 message(s) de cette discussion en une page

22/02/2013, 09h34
SpaceFrog

essaye d'applique sur le mousenter sur le mousedown ...

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:

$('#' + idParent).draggable('disable');

Voici le code global

Code:

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>');
}

Merci

22/02/2013, 11h20
SpaceFrog

j'ai déja rencontré des soucis avec des - dans des ids ...
j'avais du les remplacer par des underscores
22/02/2013, 11h42
Invité
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.. :calim2:
Code:

1 2 3 $("#div_canvas").on("mouseenter", ".draggable", function(e){ $(this).draggable(); });
22/02/2013, 13h59
Invité

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.. :calim2:

Bonjour,

J'ai refaits plusieurs test sur ce code:
Code:

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; });
Et avec une modification sur celui ci:
Code:

1 2 3 4 5 $("#div_canvas").on("mouseenter", ".draggable", function(e){ if(bResize == false){ $(this).draggable(); } });
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.

Du coup le resize de mon div "père" commence et cela fonctionne, c'est vraiment cette ligne la qui n'a aucun impact.. :(

Code:

$('#' + idParent).draggable('disable');

Merci pour votre aide

Après modifications j'ai ceci mais pas mieux... toujours cette désactivation du draggable qui ne fonctionne pas.. :'(

Code:

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>');
}

Merci

Voir 40 message(s) de cette discussion en une page