1

内部に<div>グラフを表示するがあります。このグラフが大きくなりすぎることが<div>あるので、ユーザーがマウスでグラフをつかんで移動する方法が必要です。jQuery UIのドラッグ可能なインタラクションを見つけ、これが必要だと思いました。基本を機能させるのは簡単でしたが、これを正しく行うのに苦労しています。

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

理想的とは言えませんが、それでも問題ありません。グラフが親に収まるほど小さく<div>、何も隠されていない場合でも、グラフを好きな場所にドラッグできます。これを正しく機能させることすらできません。何が起こるかというと、containmentオプションを指定しないことを選択できます。その場合、グラフは制約されません。問題は、グラフ<div>が特定のサイズ（親の幅と高さの100％）のみであるということ<div>です。ノードは、このサイズの外側に絶対位置で配置されます。次に、グラフをドラッグして非表示のノードを表示すると、グラフをドラッグできなくなります...グラフの外側をクリックしているためです<div>。

グラフコンテナ<div>をいじって、ノードが追加または削除されたときにそのコンテナdivのサイズを動的に変更することもできます。または、mousemoveイベントを使用するだけで、jQueryUIなしでこれを実装できます。最良のアプローチは何ですか。これに適した別のライブラリはありますか？

4

1 に答える 1

4

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

さて、これらの制約のいずれかがすでに「適合」している場合は、オフセットに「ゼロ」にする必要があります。両方が適合している場合は、ドラッグ可能なものの追加をスキップしてください...すべてをまとめると次のようになります。

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
    });
}

いじる：http ：//jsfiddle.net/gnarf/jqy2b/1/

ドラッグ可能なもののサイズを動的に変更する必要がある場合は、包含オプションを再計算するだけです。

于 2011-04-18T09:56:42.590 に答える