IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Div dynamique hérite pas du JS


Sujet :

jQuery

  1. #21
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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 !

  2. #22
    Invité
    Invité(e)
    Par défaut
    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
    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>');
    }
    Merci

  3. #23
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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 !

  4. #24
    Invité
    Invité(e)
    Par défaut
    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();
    });

  5. #25
    Invité
    Invité(e)
    Par défaut
    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..

  6. #26
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    J'ai refaits plusieurs test sur ce code:
    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;
    });
    Et avec une modification sur celui ci:
    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();
            }
    });
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#' + idParent).draggable('disable');
    Merci pour votre aide
    Dernière modification par Bovino ; 24/02/2013 à 17h05. Motif: Réduction d'indentation : merci de penser à ceux qui lisent le code...

  7. #27
    Invité
    Invité(e)
    Par défaut
    Après modifications j'ai ceci mais pas mieux... toujours cette désactivation du draggable qui ne fonctionne pas.. :'(

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

Discussions similaires

  1. div dynamique ne prend pas en compte le fichier css
    Par jaaf64 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 18/05/2013, 06h52
  2. Réponses: 1
    Dernier message: 26/02/2011, 19h26
  3. [AJAX] Div dynamique AJAX. Sous IE, les images ne s'affichent pas
    Par N3odyme dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 10/12/2006, 20h56
  4. div dynamique
    Par Invité(e) dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 21/10/2005, 22h50
  5. Ma classe fille n'hérite pas de sa classe mère
    Par Invité dans le forum Langage
    Réponses: 3
    Dernier message: 15/06/2005, 12h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo