Draggable hors du conteneur

Bonjour,

Voici comment est rendu ma page :

Code:

---

1 2 3 4 5 6 7 8 9

<div class="ScrollContainer"> <div class="ScrollableContent"> <div id="Draggable1"></div> <div id="Draggable2"></div> <div id="Draggable3"></div> <div id="Draggable4"></div> ... </div> </div>

---

le css

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

div.ScrollContainer{ clear: both; border: 1px solid #963; height: 285; overflow: auto; width: 756px; }   html > body div.ScrollableContent{ display: block; height: 262; overflow: auto; width: 100%; }

---

Une fois ma page chargée j'init mes éléments draggables:

Code:

---

1 2 3 4

var Draggables = $("div[id^=Draggable]"); Draggable.each(function () { $(this).draggable({ revert: true }); });

---

Le but de ma page est de pouvoir drag un des items jusque dans une div "Droppable" qui sera située en dehors du ScrollContainer.
Hors je ne peut pas drag les éléments en dehors du ScrollContainer.
Y a t'il un moyen de le faire ou dois-je placer mon droppable a l’intérieur et l'immobiliser ?

Bonjour

Voir le code source de la démo http://jqueryui.com/droppable/#accepted-elements

Je ne vois pas ce qui peut aider la résolution de mon problème dans le code de la demo. Je loupe quelque chose ?

Citation:

---

Je loupe quelque chose ?

---

Oui !

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(function() { $( "#draggable, #draggable-nonvalid" ).draggable(); $( "#droppable" ).droppable({ accept: "#draggable", activeClass: "ui-state-hover", hoverClass: "ui-state-active", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); });

---

Ceci ne réponds en rien a la question.
La question porte sur l'agencement des éléments et non sur le fonctionnement des composants UI.
J'ai résolu le problème. Merci quand même.

Meme si j'ai résolu le problème en placent le droppable dans le meme conteneur que mes draggables, j'aimerais savoir si il y a possibilité de déplacer les graggables hors de leur conteneur.