JqueryUI Draggable – Ridimensiona il contenitore genitore

Ho due div, uno nell'altro. Il div esterno (il contenitore) è di size arbitrarie. Il div interno è impostato su una dimensione specificata più piccola del suo contenitore.

Ho applicato jquery trascinabile al div interno e sto cercando di ridimensionare automaticamente il suo contenitore genitore quando trascinalo il div interno oltre i bordi esterni del contenitore. Come posso fare questo?

Vedo una caratteristica simile qui su StackOverflow quando chiediamo una nuova domanda. La textarea per la digitazione di una domanda ha un div denominato "grippie" che ridimensiona la textarea. Questa è esattamente la funzionalità che cerco, ma con un div invece di un textarea.

Ecco qui. Funziona sia in orizzontale che in verticale. Vedere in azione all'indirizzo http://jsfiddle.net/evunh/1/

var i = $('#inner'); var o = $('#outer'); i.draggable({ drag: function(event, ui) { if (i.position().top > o.height() - i.height()) { o.height(o.height() + 10); } if (i.position().left > o.width() - i.width()) { o.width(o.width() + 10); } } }); 

È ansible utilizzare la function di trascinamento fornita con jquery draggable. Nella function di trascinamento è ansible controllare solo se i bordi del div interno sono al di fuori dei bordi del divano del contenitore.

In tal caso, aumentare la width o l'altezza del div del contenitore.

È ansible utilizzare il metodo di posizionamento che è nativo in jquery ui per verificare le posizioni di in alto, in basso, a sinistra ea destra di entrambi i tag div.

Qui ci sono i collegamenti all'API per informazioni più dettagliate su come funzionano questi methods.

  1. Draggable -> event-> trascina
  2. Posizione