7

私はこのHTMLを持っています

<div id="workflowEditor" class="workflow-editor">

    <div class="node" class="ui-widget" style="top:20px; left:40px;">
        <div class="ui-widget ui-widget-header ui-state-default">Header test</div>
        <div class="ui-widget ui-widget-content">Test Content</div>
    </div>

</div>

このCSSで

.workflow-editor
{
    position: relative;
    overflow: auto;
}

.workflow-editor .node
{
    position: absolute;

    min-width: 64px;
    min-height: 64px;
}

呼ぶより

$(".node", "#workflowEditor").draggable({
    containment: [0, 0, 500, 500]
});

ただし、この「ノード」をドラッグすると、負の値にドラッグできます。draggable境界ボックスを制限するためにブラウザのビューポート座標を使用しているようです。座標がドラッグ可能な親に対して相対的であることを伝える方法はありますか?

注: 親は時間の経過とともに位置が変わる場合があります。

**編集**

ドラッグ可能要素が配置されているサーフェスは、他のコンテンツに対して相対的です。CSS で指定されているように、 にする必要があるoverflow:scroll;ため、ドラッグ可能オブジェクトを外側にドラッグすると、スクロールバーが表示されます。親のサイズは固定です。私が抱えている問題は、ドラッグ可能なものをサーフェスの左 (または上) にドラッグできることです (したがって、それらを失います)。コンテインメントを に設定するのと同様の動作をさせたいのです"parent"が、ドラッグ可能オブジェクトが親の右側/下側にオーバーフローできるようにします。

4

2 に答える 2

0

私は同様の問題を抱えていました.コンテナ内に「ボックス」を配置する必要があり、それらが下または右にオーバーフローできるようにする必要がありましたが、左または上にはオーバーフローしませんでした。また、コンテナーの位置を変更できるようにする必要もありました。

残念ながら、エレガントな解決策を見つけることができませんでした。お気づきのとおり、座標配列を介して包含を設定すると、ドキュメント関連のメトリックが確立されるため、ドキュメントに対するコンテナーの位置を操作する必要があります。

私の小さなハックは、コンテナーの「ドキュメント」位置を上と左の制限に使用することでした (jQuery offset[1]を使用し、右と下に十分なdragstart値を使用しました。イベント [2] を使用して再読み取りとコンテナーのビューポート位置をリセットします (optionsメソッド [3]を使用して、コンテナー ボックスをコンテナーの現在の座標に更新します)。

var $containerEl = $('#container'),
    $draggableEl = $('#my-draggable');

$draggableEl.on('dragstart', function (e) {
    $(e.target).draggable('option',
                          'containment',
                          [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]);
});

$draggableEl.draggable({
    containment: [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]
});

[1] http://api.jquery.com/offset/

[2] http://api.jqueryui.com/draggable/#event-start

[3] http://api.jqueryui.com/draggable/#method-option

于 2014-12-09T16:12:41.157 に答える