Div dynamique hérite pas du JS

Version imprimable

19/02/2013, 11h02
Invité

Div dynamique hérite pas du JS
Bonjour,

Sur une page web je crée dynamiquement un ensemble de div quand on clic sur un bouton.
Code:

1 2 3 4 5 function ajouter(nom_objet){ valueDiv = $('#detail').val(); valueDiv = valueDiv + '<div class="draggable"><img class="img_objet" src="img/arbre_1.png" /></div>'; $('#detail').html(valueDiv); }
Le problème c'est qu'il n'hérite pas de ma classe "draggable"
Code:

1 2 3 4 5 $(function() { $(".draggable" ).draggable({ cursor: "crosshair" }); });
Comment "lier" ce code js à quelque chose crée en dehors du chargement de la page ?

Merci
19/02/2013, 11h07
SpaceFrog

un classique pourtant

voir on() ou delegate()

ex: http://jsfiddle.net/4aGwY/2/
19/02/2013, 15h59
Invité
Merci, j'ai vu avec le "On" mais j'ai pas réussi a le mettre en place...

Avec :
Code:

1 2 3 $("#terrain_detail").on("click", "img", function(event){ alert('on'); });
j'ai bien le message "on" par contre c'est pour affecter ma fonction draggable..
Code:

1 2 3 4 5 $(function() { $(".draggable").draggable({ cursor: "crosshair" }); });
J'ai essayé en indiquant le nom de la fonction ou autre .. sans succès ..

Merci

Code:

1
2
3
$("#terrain_detail").on("mouseenter", ".draggable", function(){
  $(this).draggable();
});

sinon ajoute le draggable au moment de la création

Code:

1
2
3
4
5
function ajouter(nom_objet){
$('#detail').html($('#detail').val())
               .append( $('<div/>').addClass('draggable').draggable().append('<img/>').attr({"class":"img_objet","src":"img/arbre_1.png"}) )
 
}

19/02/2013, 23h18
danielhagnoul

Bonsoir

Pour les widgets UI, je crois qu'il n'y a qu'une seule solution, détruire (destroy) et reconstruire.

Le cas a déjà été abordé plusieurs fois sur le forum, par exemple : http://www.developpez.net/forums/d10...-deja-chargee/
21/02/2013, 11h36
Invité
Citation:
Envoyé par SpaceFrog

Code:

1 2 3 $("#terrain_detail").on("mouseenter", ".draggable", function(){ $(this).draggable(); });
Bonjour,
Merci cela fonctionne parfaitement :)

Par contre mon code ajouté dynamiquement est comme ceci:
Code:

1 2 3 4 <div id="id-draggable" class="div-draggable draggable unselectable"> <img class="img-objet" src="img/arbre_1.png" /> <div class="resize"></div> </div>
Ton code marche pour le draggable par contre les evenements que j'ai sur $('.resize').mousedown, .. ne fonctionne plus aussi.

Et ce code ne change rien alors que ca marche pour le draggable..
Code:

1 2 3 $("#terrain_detail").on("mouseenter", ".resize", function(){ $(this).addClass('resize'); });
Merci
21/02/2013, 11h59
SpaceFrog

mousedown != mouseenter ...

je triche en appliquant le draggable sur le mousenter ...

applique egalement le mousedown sur le mousenter ...
21/02/2013, 13h26
Invité
Oui dans mon copié coller pour le poste j'ai oublié de modifier, mais j'ai bien ce code qui ne marche pas :)
Code:

1 2 3 $("#terrain_detail").on("mousedown", ".resize", function(){ $(this).addClass('resize'); });
ou encode..
Code:

1 2 3 $("#div_canvas").on("mouseenter", ".resize", function(){ $(this).mousedown(); });
et pourtant rien ne change :'(
21/02/2013, 13h32
SpaceFrog

il est ou ce div? dasn quoi ? ajouté quand et comment ?

Les div que j'ajoute son contenu dans un seul div (id="div_canvas").
Quand je clic sur un bouton j'ai dans le onClick="ajouter_image('test')".

Voici le code de la fonction qui ajoute

Code:

1
2
3
4
5
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/' + nom_image + '.png" /><div class="resize"></div></div>');
	}

Et du coup sur le div ajouté j'ai ces 3 fonctions qui ne marche plus.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('.draggable').mousedown(function() {
	$(this).addClass('img-draggable-contour');
});
 
$('.draggable').mouseup(function() {
	$(this).removeClass('img-draggable-contour');
});
 
$('.resize').mousedown(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;
});

21/02/2013, 14h30
Invité

Ce code ne devrait il pas fonctionner ?

Code:

$("#div_canvas").on("mousedown", ".resize", $('.resize').mousedown()));
21/02/2013, 14h48
SpaceFrog

Code:

$("#div_canvas").on("mousedown", ".resize", function(){$('.resize').trigger("mousedown")});

Quand je test Chrome est littéralement HS avec page bleu et "une erreur s'est produite.. " :(

Voici mon code:

Code:

1
2
3
$("#div_canvas").on("mousedown", ".draggable", function(){$('.draggable').trigger("mousedown")});
$("#div_canvas").on("mouseup", ".draggable", function(){$('.draggable').trigger("mouseup")});
$("#div_canvas").on("mousedown", ".resize", function(){$('.resize').trigger("mousedown")});

21/02/2013, 17h36
Bovino

Code:

$("#div_canvas").on("mousedown", ".draggable", function(){$('.draggable').trigger("mousedown")});

Quand tu fais ça, la ligne $('.draggable').trigger("mousedown") fait que tu simules un mousedown sur tous les éléments ayant la classe draggable (et idem pour les lignes suivantes), je comprends que Chrome trouve ça un peu lourd à traiter ! :aie:
22/02/2013, 08h54
Invité

Arf.. du coup je vois plus trop comment résoudre mon problème.. :'(
22/02/2013, 08h58
Bovino

En lisant la doc sur l'objet event. :aie:

Code:

$("#div_canvas").on("mousedown", ".draggable", function(e){$(e.target).trigger("mousedown")});
22/02/2013, 09h15
Invité

J'avais essayé mais j'ai toujours la meme erreur et cela ne marche pas :aie:

Citation:

Uncaught RangeError: Maximum call stack size exceeded
22/02/2013, 09h18
SpaceFrog

tu rentres dans une boucle infinie d'attribution de mousedown sur le mousedown ...

plutot que de créer les evenements dynamiquement ...
essaye d'avoir un element sur la âge avec les évenements et de le cloner avec jquery ...
22/02/2013, 09h31
Invité

Huuh :(
C'est quand même complexe simplement pour appliquer un évènement.. :)
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