ドラッグ可能に問題があります。<div>ドラッグを開始すると、カーソルの位置は、ドラッグ可能な要素の親ではなく、ウィンドウの [0,0] を基準にして測定されます。
たとえば、親コンテナーが a だけオフセットされているmargin-left:200px場合、コンテナーの左境界線に接している要素を右にドラッグしようとすると、カーソルがこの左境界線の右に 200 ピクセルになるまで移動が開始されません。 .
実際のデモについては、次を参照してください (JSFiddle ではこれを複製できませんでした): Demo
これには、ドラッグ可能なソースを変更する必要があると思います。私にとっては少し複雑です。
何か案は？
$(element).offsetParent() を使用して、親のオフセットを取得できます。親要素が絶対配置されている場合に特に便利です。すべての親要素を調べて、それらのオフセットを合成するループを作成できます。
参考までに、あなたのデモはタッチ対応デバイスでは動作しません ;)
更新 私はあなたのデモを見ました（最終的に再びPC上で）。div.container の 'position:relative' を削除すると、ドラッグ可能オブジェクトは期待どおりに動作します (または、少なくとも動作することを期待していると思います :D )。
私もこの問題を抱えていましたが、最初にウィンドウへのバウンディングボックスのオフセットを左右に計算することで解決できました。次に、コンテインメントの x1、y1、x2、y2 の位置を更新して、バウンディング ボックスの位置を反映させました。