Discussion :

[Invité]

Bonjour,

Voici comment est rendu ma page :

Code html :

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

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

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

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

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

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 ?

[danielhagnoul]

Bonjour

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

[Invité]

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 ?

[danielhagnoul]

Je loupe quelque chose ?

Oui !

Code :

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

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

[Invité]

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.

[Invité]

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.