絶対位置とボトムプロパティを持つjQuery UIのドラッグ可能

Question

jQuery UIを使用してドラッグ可能な<div>を作成しています。 <div>は絶対に右下または左上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は次のようになります。

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

JavaScriptが<div>要素をドラッグ可能にする$('.dragbox').draggable();です。左上の<div>は期待通りに機能しますが、右下の<div>はドラッグするとサイズが変更されます。 min-heightの内容を.dragboxからheightに変更した場合、両方のボックスで予想される動作が表示されますが、内部コンテンツの長さがわからないため、min-heightを使用する必要があります。

<div>を右下に配置し、ドラッグすると<div>のサイズを変更せずにドラッグを有効にするにはどうすればよいですか？左上と右下の<div>要素は同じように動作します。

DEMOは、CSSにtopとleft値を操作することにより、

Answer 1

jQueryのドラッグ可能な作品（私はクローム27とSafari 6を使用します）。ボックスにtopとbottomの両方の値が設定されていれば（静的な高さはありません）、ボックスは両方のプロパティに一致するように引き伸ばされます。これがサイズ変更の原因です。

回避策は、ボックスに静的な高さを設定するか、オプションでない場合は、ドラッグ可能なアイテムが作成されたときにボトム値を「自動」に設定し、同時に現在の「上部」の位置を取得します要素が配置されたままであることを確認します。

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

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

Answer 2

@xecは私の主なアイデアを与えたと私はそれをこのように変更し、それは私のために働きました。私にとって

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

Answer 3

は、この方法を働いていた（私の下のための絶対位置のdiv左）：私はほかにボックスが動的高さを持っている私の場合を解決することができたこのアイデアを使用して

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