jQuery UI draggable z bezwzględną pozycją i dolną właściwością

Question

Używam jQuery UI do utworzenia przeciągalnego <div>. <div> jest absolutnie przygotowani do prawej dolnej lub górnej lewej wykorzystaniem 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; 
} 

HTML wygląda następująco:

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

Kod JavaScript jest $('.dragbox').draggable(); aby uczynić <div> elementy przeciągany. Górny lewy <div> działa zgodnie z oczekiwaniami, ale prawy dolny <div> zmienia rozmiar po przeciągnięciu. Jeśli zmieniam poperty min-height z .dragbox na height widzę oczekiwane zachowanie dla obu pól, ale muszę użyć do tego celu min-height, ponieważ nie znam długości wewnętrznej zawartości.

Jak ustawić pozycję <div> w prawym dolnym rogu i włączyć przeciąganie bez zmiany rozmiaru po przeciągnięciu? Elementy lewego górnego i dolnego prawego rogu powinny zachowywać się w ten sam sposób.

DEMO (używam Chrome 27 i Safari 6) można przeciągać prace

Answer 1

jQuery poprzez manipulowanie CSS top i left wartości. Gdy pole ma ustawione zarówno wartości (jak i bez wysokości statycznej), pole zostanie rozciągnięte, aby dopasować obie właściwości. To właśnie powoduje zmianę rozmiaru.

Obejście problemu może polegać na ustawieniu wysokości statycznej na polu, lub jeśli nie jest to opcja, ustaw dolną wartość na "auto", gdy tworzony jest przeciągnięty, i pobieraj bieżące "górne" położenie w tym samym czasie aby upewnić się, że element pozostaje ustawiony.

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

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

Answer 2

@xec dał mi główną ideę i zmienił go w ten sposób i to działało na mnie;

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

Answer 3

dla mnie, pracował w ten sposób (na moim dołu, od lewej absolutny umieszczony div):

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