Discussion :

[Invité]

Bonjour,

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

Code :

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

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 :

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

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

[SpaceFrog]

un classique pourtant

voir on() ou delegate()

ex: http://jsfiddle.net/4aGwY/2/

[Invité]

Merci, j'ai vu avec le "On" mais j'ai pas réussi a le mettre en place...

Avec :

Code :

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

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 :

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

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

[SpaceFrog]

Code :

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

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

[SpaceFrog]

sinon ajoute le draggable au moment de la création

Code :

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

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"}) )
 
}

[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/

[Invité]

Code :

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

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 :

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

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 :

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

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

Merci

[SpaceFrog]

mousedown != mouseenter ...

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

applique egalement le mousedown sur le mousenter ...

[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 :

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

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

ou encode..

Code :

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

1
2
3
$("#div_canvas").on("mouseenter", ".resize", function(){
  $(this).mousedown();
});

et pourtant rien ne change :'(

[SpaceFrog]

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

[Invité]

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 :

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

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 :

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

[Invité]

Ce code ne devrait il pas fonctionner ?

Code :

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

$("#div_canvas").on("mousedown", ".resize", $('.resize').mousedown()));

[SpaceFrog]

Code :

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

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

[Invité]

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

Voici mon code:

Code :

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

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

[Bovino]

Code :

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

$("#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 !

[Invité]

Arf.. du coup je vois plus trop comment résoudre mon problème.. :'(

[Bovino]

En lisant la doc sur l'objet event.

Code :

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

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

[Invité]

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

Uncaught RangeError: Maximum call stack size exceeded

[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 ...

[Invité]

Huuh
C'est quand même complexe simplement pour appliquer un évènement..