jQuery UIでドラッグするJavascript要素

Question

グラフを内部に表示する<div>があります。時々このグラフは<div>のために大きすぎるので、私はユーザーがマウスでグラフをつかみ、それを動かす方法が必要です。私はjQueryのUI Draggableインタラクションを見つけ、これが私の必要と思っていました。基本を動作させるのは簡単には簡単でしたが、この問題を解決するには問題があります。

理想的には、グラフをドラッグするだけで隠されていない部分が表示されることが理想です。たとえば、右に多くのグラフが隠れている場合は、それを左にドラッグしてその隠れた部分を表示することができます。右にあるものがすべて見えたら、それを左にドラッグすることはできません。 jQuery UI Draggableでこれをどう実装すればよいですか？出来ますか？ jQuery UIはこれに適したツールですか？

グラフが親に収まるくらい小さくても何も隠されていなくても、どこでもグラフをドラッグできます。私はこれを正しく動作させることさえできません。何が起こるのかは、containmentオプションを指定しないことだけです。グラフは制約されていません。グラフの<div>は特定のサイズ（100％の幅と親の高さ、<div>）です。ノードは、このサイズ外の絶対位置に配置されます。グラフをドラッグして隠れたノードを表示すると、グラフの外をクリックすることができなくなります... <div>の外側をクリックしているためです。

グラフコンテナ<div>私は、物事を正しく取得し、ノードが追加または削除されたときにそのコンテナdivのサイズを動的に変更するために混乱している可能性があります..または、mousemoveイベントを使用してjQuery UIなしで実装できます。最善のアプローチは何ですか？これのために別の良い図書館はありますか？

Answer 1

私は、これはあなたが探しているものだと思う - あなたのコンテナがoverflow:hiddenする必要があり、あなたのグラフは、幅と高さで、いくつかのものに含まれることになる、それを超えてあなただけで「制約」のボックスを、計算する必要がありますコンテナの.offset()になり、「オーバーフロー」部分IEを計算することによって「余分なスペース」を追加するoffset.left + container.innerWidth() - draggable.width() - >offset.left

これらの制約のいずれかが既に「適合」している場合は、オフセットに「ゼロ」するようにしてください。両方が合う場合は、ドラッグ可能なものを追加しないでください...それをすべて一緒に入れて、あなたが得る：http://jsfiddle.net/gnarf/jqy2b/1/

あなたが動的にドラッグ可能なもののサイズを変更する必要がある場合は、単に封じ込めオプションを再計算：いじっ

var contain = $("#container"), 
    big = $("#bigthing"), 
    offset = contain.offset(), 
    // calculate the "constraints" 
    constraints = [ 
     offset.left + contain.innerWidth() - big.width(), 
     offset.top + contain.innerHeight() - big.height(), 
     offset.left, 
     offset.top 
    ], 
    // it "fits" if our left/top constraint is higher or equal to the right/bottom 
    fitsX = constraints[0] >= constraints[2], 
    fitsY = constraints[1] >= constraints[3]; 


if (!(fitsX && fitsY)) { 
    if (fitsX) { 
     constraints[0] = constraints[2]; 
    } 
    if (fitsY) { 
     constraints[1] = constraints[3]; 
    } 
    big.draggable({ 
     containment: constraints 
    }); 
} 

を！