jquery layout et dynamique draggable div numéro

Question

J'utilise jquery layout plugin et j'ai la situation suivante que je ne trouve pas de solution. Comment faire pour que le panneau central augmente sa taille de façon permanente en faisant glisser le div au-delà de la bordure inférieure.

J'ai un volet gauche et un volet central. Je génère dynamiquement div lorsque l'utilisateur clique sur le volet de gauche. Les divs sont générés et déposés sur le volet central. Les divs sont déplaçables et redimensionnables. Tout fonctionne très bien avec glisser et redimensionner sur la zone centre visible. Au moment où je fais glisser le div au-delà du bas, la barre de défilement sur le volet central apparaît et il semble que le volet central s'étend à accueillir la nouvelle position de la div traîné. Mais le moment j'essaie pour redimensionner la div ou ajouter une autre div, il saute à la section supérieure de la div et réinitialise les barres de défilement. J'ai vérifié la hauteur du centre div dans firebug et il reste à la même hauteur lors de l'initialisation même après avoir traîné le nouveau div au-delà du fond.

Voici le code html de la page de test.

Il suffit de copier/coller entièrement dans une page html. Dans le volet de gauche, cliquez sur le bouton "Ajouter un nouveau" pour ajouter un nouveau div qui est déplaçable et redimensionnable.

1. Cliquez sur « Ajouter »
2. Faites glisser le div nouvellement ajouté au-delà du fond du volet central.
3. Le volet central affiche la barre de défilement comme prévu.
4. Si vous vérifiez le centre de la hauteur div dans Firebug, il ne change pas
5. Maintenant, essayez de redimensionner la div nouvellement ajouté en faisant glisser sa poignée
6. Il saute vers le haut et la zone centrale perd sa barre de défilement.

Je ne pouvais pas coller la page html complète est donc ici la référence au code en bas de ce fil http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee

Et voici le lien de test http://jsfiddle.net/yZc63/

Answer 1

Je ne suis pas surpris un a déjà rencontré cette situation avant? Même sans le plugin de mise en page, ma solution n'est pas très jolie. Afin de simuler la page sans le plugin de mise en page, j'ai dû conserver le haut et le volet de gauche en utilisant la position: fixed property dans css. Et il n'y a pas de centre du tout. J'ajoute la nouvelle div directement au corps du html. La raison en est que je ne veux pas voir d'autres barres de défilement sur les barres de défilement du navigateur. En d'autres termes, le volet central doit défiler lorsque les barres de défilement du navigateur sont déplacées. J'attache la solution pour que vous ayez une idée.

Je suis ouvert à toute solution même sans le plugin de mise en page si je peux simuler le fichier joint précédent en utilisant une autre approche. Je joins ma page sans le plugin de mise en page mais je ne suis pas sûr que ce soit la seule solution élégante qui reste.

Vous pouvez vérifier la solution ici http://jsfiddle.net/c7wrT/

ajoute la div dynamique directement au corps html une bonne approche?

Answer 2

J'ai rencontré la même situation et cette réponse m'a aidé. https://stackoverflow.com/a/33004821/2139859. Mis à jour Fiddle:http://jsfiddle.net/bababalcksheep/yZc63/11/

$(".removalbe-recom").draggable({ 
    appendTo: "body", 
    helper: "clone", 
    revert: "invalid", 
    cursor: "move", 
    containment: "document", 
    zIndex: 10000, 
    scroll:false, 
    start: function (event, ui) { 
    $(this).hide(); 
    }, 
    stop: function (event, ui) { 
     $(this).show(); 
    } 
});