jQuery UI trascinabile con posizione assoluta e proprietà inferiore

Question

Sto usando l'interfaccia utente di jQuery per creare un draggable <div>. Il <div> è posizionato in modo assoluto al basso a destra o in alto a sinistra usando i CSS:

.dragbox { 
    position: absolute; 
    width: 140px; 
    min-height: 140px; /* I need to use min-height */ 
    border: 3px solid black; 
    padding: 10px; 
} 
.bottom { 
    bottom: 5px; /* causes box to resize when dragged */ 
    right: 5px; 
} 
.top { 
    top: 5px; /* does not cause box to resize */ 
    left: 5px; 
} 

Il codice HTML simile al seguente:

<div class="dragbox bottom"> 
    Bottom Box :(
</div> 
<div class="dragbox top"> 
    Top Box :) 
</div> 

Il JavaScript è $('.dragbox').draggable(); di rendere i <div> elementi trascinabili. Lo in alto a sinistra funziona come previsto, ma il ridimensionamento in basso a destra viene ridimensionato durante il trascinamento. Se cambio la proprietà .dragbox a height a height vedo il comportamento previsto, ma devo usare min-height per questo perché non conosco la lunghezza del contenuto interno.

Come posizionare <div> in basso a destra e abilitare il trascinamento senza dover ridimensionare durante il trascinamento? Gli elementi in alto a sinistra e in basso a destra dovrebbero comportarsi nello stesso modo.

DEMO (io uso Chrome 27 e Safari 6) opere trascinabili

Answer 1

di jQuery manipolando il css top e left valori. Quando una casella ha entrambi i valori top e bottom impostati (e nessuna altezza statica), la casella si allungherà per corrispondere a entrambe le proprietà. Questo è ciò che sta causando il ridimensionamento.

Una soluzione alternativa potrebbe essere quella di impostare un'altezza statica sulla casella o, se questa non è un'opzione, impostare il valore inferiore su "auto" quando viene creato il trascinamento e recuperare la posizione "superiore" corrente allo stesso tempo per assicurarsi che l'elemento rimanga messo.

$('.dragbox').draggable({ 
    create: function(event, ui) { 
     $(this).css({ 
      top: $(this).position().top, 
      bottom: "auto" 
     }); 
    } 
}); 

http://jsfiddle.net/expqj/8/

Answer 2

@xec mi ha dato l'idea principale e l'ho cambiato in questo modo e ha funzionato per me;

jQuery("#container").draggable({ 
        start: function (event, ui) { 
         $(this).css({ 
          right: "auto", 
          top: "auto" 
         }); 
        } 
       }); 

Answer 3

per me, ha lavorato in questo modo (per il mio basso, a sinistra div posizionato assoluto):

 $("#topBarUpDownDiv").draggable({ axis: "x", 
      stop: function(event, ui) { 
       var elem=$(this)[0]; 
       $(elem).css({ bottom: $(this).position().bottom, top: "auto" }); 
      } 
     });