Discussion :

[Sanceray3]

Bonsoir à tous,

voilà je vous explique mon problème sur lequel je me prends la tête depuis X jours et sur lequel je vais avoir besoin de votre précieuse aide.

J'ai une fenêtre qui contient une div nommée "#div_images_bar" dans laquelle j'ai des photos. J'ai défini une option draggable sur les éléments "img" de la façon suivante :

Code :

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

$("#div_images_bar img").draggable({ revert: true });

Ce que je souhaite faire c'est pouvoir "dropper" mes images sur mon éditeur WYSIWYG (plus particulièrement sur les éléments de type "<p>") qui lui est contenu dans une iFrame (intégrée à ma première page) nommée "#myIframe". J'ai donc crée une fonction js sur mon iFrame qui me défini ma zone droppable... Je l'ai fait de la sorte :

Code :

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

1
2
3
4
5
6
7
8
9
 function initDrop(){
 
                $('.wym_iframe p').droppable({
                    tolerance: 'pointer',
                    accept: $('#div_images_bar img',window.parent.document),
                    drop: function(ev, ui) {
                        alert ('youpi');                    
                    }
                });

Pour info : ".wym_iframe" est la class du body de mon iframe.

Le hic c'est que ça ne fonctionne pas et que j'ai beau essayer de tourner les choses dans tous les sens, je ne m'en sors pas.

Pourtant la définition du draggable fonctionne bien, et mes éléments "<p>" sur mon iFrame récupèrent bien la class "ui-droppable", ce qui me laisse penser que la fonction droppable a bien fait son boulot sur l'iFrame.

Savez vous si il est possible de faire un drag and drop entre une fenêtre appelante et une iframe et si oui de quelle manière ?

Je vous remercie par avance de vos précieux conseils.

[danielhagnoul]

Bonsoir.

Savez vous si il est possible de faire un drag and drop entre une fenêtre appelante et une iframe et si oui de quelle manière ?

Mais j'essayerais comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$("#div_images_bar img").draggable({
     revert: true,
     scope: "barImg"
});
 
$('.wym_iframe p').droppable({
    tolerance: 'pointer',
    scope: "barImg",
    drop: function(ev, ui){
        alert('youpi');
    }                   
});

[Sanceray3]

Bonjour Daniel,

merci pour vos conseils. J'ai essayé votre méthode mais ça ne marche malheureusement pas mieux.

J'ai également essayé tout un tas de chose, de définir mes éléments "draggables" depuis mon iFrame comme cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$("#div_images_bar img",window.parent.document).draggable({
                    revert: true,
                    scope: "barImg"
                });
 
                $('p').droppable({
                    scope: "barImg",
                    tolerance: 'pointer',                  
                    drop: function(ev, ui) {
                        alert ('youpi');                       
                    }
                });

Mais ça ne change rien, ça ne fonctionne pas... Merci pour votre idée, je suis preneur si vous en avez d'autres.

Cdlt.