jquery Layout und dynamisch ziehbare div Problem

Question

Ich benutze jquery Layout-Plugin und habe die folgende Situation, dass ich keine Lösung finden kann. Wie kann ich die Größe des mittleren Bereichs dauerhaft erhöhen, indem Sie das div über den unteren Rand ziehen.

Ich habe eine linke Scheibe und eine mittlere Scheibe. Ich erzeuge div dynamisch, wenn der Benutzer auf den linken Bereich klickt. Die divs werden generiert und auf dem mittleren Bereich abgelegt. Die divs sind ziehbar und in der Größe veränderbar. Alles funktioniert gut mit dem Ziehen und Ändern der Größe in der sichtbaren Mitte Bereich. In dem Moment, in dem ich das div über den unteren Rand ziehe, erscheint die Bildlaufleiste auf im mittleren Bereich und es scheint, dass der mittlere Bereich sich bis erstreckt, um die neue Position des gezogenen div aufzunehmen. Aber in dem Moment, in dem ich versuche, die Größe der div zu ändern oder ein weiteres div hinzuzufügen, springt es zum oberen Abschnitt von der div und setzt die Bildlaufleisten zurück. Ich habe die zentrale div Höhe in firebug überprüft und es bleibt auf der gleichen Höhe, wenn initialisiert wird, auch nachdem das neue div über den Boden gezogen wurde.

Hier ist die Testseite HTML-Code.

Kopieren Sie einfach/fügen Sie vollständig in eine HTML-Seite. Klicken Sie im linken Bereich auf die Schaltfläche "Add new", um ein neues div hinzuzufügen, das ziehbar und in der Größe veränderbar ist.

1. Klicken Sie auf „Add new“
2. Ziehen Sie die neu über den Boden des Mittelbereich hinzugefügt div.
3. Der mittlere Bereich zeigt die Bildlaufleiste, wie es sich vorstellen soll.
4. Wenn Sie die Höhe des Zentrum div Check-in Firebug, es ändert nicht
5. versucht nun die neu hinzugefügte div Größenänderung am Griff ziehen
6. Es springt nach oben und die Center-Box verliert seine Scrollbar.

Ich konnte nicht die komplette HTML-Seite einfügen, so ist hier der Verweis auf den Code am Ende dieses Threads http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee

Und hier ist der Test Link http://jsfiddle.net/yZc63/

Answer 1

Ich bin niemand überrascht ist diese Situation schon einmal aufgetreten? Auch ohne das Layout-Plugin ist meine Lösung nicht sehr hübsch. Um die Seite ohne das Layout-Plugin zu simulieren, musste ich das obere und das linke Fenster mit position: fixed property in css behalten. Und es gibt überhaupt kein center div. Ich füge das neue div direkt in den HTML-Text ein. Der Grund ist, dass ich keine zusätzlichen Bildlaufleisten oberhalb der Browser-Bildlaufleisten sehen möchte. Mit anderen Worten, der mittlere Bereich sollte scrollen, wenn die Browser-Bildlaufleisten verschoben werden. Ich füge die Lösung an, damit Sie eine Idee haben.

Ich bin offen für jede Lösung auch ohne das Layout-Plugin, wenn ich die vorherige angehängte Datei mit einem anderen Ansatz simulieren kann. Ich füge meine Seite ohne das Layout-Plugin an, bin mir aber nicht sicher, ob das die einzig elegante Lösung ist.

Sie die Lösung hier überprüfen http://jsfiddle.net/c7wrT/

fügt den dynamischen div einen guten Ansatz direkt an den HTML-Körper?

Answer 2

Ich lief in die gleiche Situation und diese Antwort half. https://stackoverflow.com/a/33004821/2139859. Aktualisiert 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(); 
    } 
});