事業部は、私はドラッグやサイズ変更が可能なブロックのカップルとコンテナを持っているdragendイベント

Question

にリサイズします。私は境界線を追加している私はそれにクラスactiveを追加する「アクティブ」であるブロックをユーザに示すことができるようにしたいので。私はブロックをドラッグして、DIVがどんどん大きくなっ容器の中に数回、それをドロップすると

今問題があります。どちらが実際には実用的ではありません。

私はactiveクラスからスタイルを削除すると、これは発生しませんので、これは追加されている国境に関係しています。ブロックが選択されると、このクラスはすべてのブロックから削除されます。

このプロジェクトでは、widthとheightの両方を設定する必要があります。

私は少しデモを作成し、問題を示しフィドルを追加しました。 Fiddle

わずか数ブロックの1回のカップルをドラッグします。誰かが私になぜこれが起こっているのか、それを解決する方法を説明することはできますか？

Answer 1

問題がheightとwidth誤っまたborderのwidthを添加降下に計算されたということでした。

それは両方widthとheight私は国境なし要素のwidthとheightを計算するjQuerys innerWidth()とinnerHeight()機能を使用し、これらの要素に、このプロジェクトのために設定する必要があることが重要ですので。

境界があるので、計算でこの数値を削除する必要もあります。以下のコードは私の問題を解決しました。

function setDimensions(obj) { 
    obj.css('position', 'absolute'); 
    obj.css("left",parseInt(obj.css("left"))/($container.width()/100)+"%"); 
    obj.css("top",parseInt(obj.css("top"))/($container.height()/100)+"%"); 
    obj.width(((obj.innerWidth() - obj.css('borderWidth'))/$container.width()) * 100 + '%'); 
    obj.height(((obj.innerHeight() - obj.css('borderWidth'))/$container.height()) * 100 + '%'); 
} 

Answer 2

がドロップにwidthとheightを設定しないでください：

function setDimensions(obj) { 

    obj.css('position', 'absolute'); 
    obj.css("left",parseInt(obj.css("left"))/($container.width()/100)+"%"); 
    obj.css("top",parseInt(obj.css("top"))/($container.height()/100)+"%"); 
    //obj.width((obj.width()/$container.width()) * 100 + '%'); 
    //obj.height((obj.height()/$container.height()) * 100 + '%'); 
    } 

Updated Fiddle

だけ知っているので、あなたはまた、両方のwidthとheight変更、ブロックのサイズを変更する場合は、別の問題を抱えています。ブロックの最初のwidthとheightをresizableの関数start()を使用して保存し、stop()関数の終了サイズと比較し、widthまたはheightのいずれかのみを更新することをお勧めします。 @Titusに述べたように

（もちろん、そのサイズ変更が意図されている、いない限り動作）