1

jQuery のドラッグ可能なプラグインを使用していますが、次の問題に直面しています。ドラッグ可能な作成後、プラグインは指定された包含オプションを適用しません。

ここで例を見つけることができます: http://jsfiddle.net/qQYsj/。

// Containment will be applied after first move attempt
$('.item').draggable({ containment: [100, 100, 200, 200] });

許可された位置を計算して要素を配置する、余分なロジックなしで封じ込めを適用する方法はありますか? (このロジックはプラグインに既に存在します)

どうも。

4

3 に答える 3

0

重複したロジックを追加せずに可能な解決策は見つかりませんでした (配置アルゴリズムはドラッグ可能なプラグインに既に存在しますが、プラグインに強制的に実行させることはできません)。

だから私はアイテムの位置を更新するために次のコードを追加しました:

function updateItemPosition(item, container)
{
    var itemRect = getRect(item), currentPosition = item.position(),
        position = getItemPosition(getRect(container), itemRect);

    item.css('top', position.top - itemRect.top + currentPosition.top + 'px')
        .css('left', position.left - itemRect.left + currentPosition.left + 'px');
}

function getRect(target)
{
    var result = target.offset();

    result.width = target.outerWidth();
    result.height = target.outerHeight();

    return result;
}

function getItemPosition(containerRect, itemRect)
{
    var result = {};

    result.top = Math.max(containerRect.top, Math.min(containerRect.top + containerRect.height - itemRect.height, itemRect.top));
    result.left = Math.max(containerRect.left, Math.min(containerRect.left + containerRect.width - itemRect.width, itemRect.left));

    return result;
}

そして、次のように使用する必要があります。

updateItemPosition($('.item'), $('.placeholder'));
于 2013-05-20T16:59:24.410 に答える
0

あなたのドラッグ可能な封じ込めは意図したとおりに機能していると思います。ただし、ドラッグ可能な要素はそのコンテナー内にはありません。

.itemそもそも収容エリア内にCSS を使用して配置しないのはなぜですか?

jsフィドル

.item
{
    position:absolute;
    top: 100px;
    left:100px;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}

よく考えてみると、「ドラッグをシミュレートする」と言うとき、次のようなことを話しているのでしょうか。

jsfiddle2

// drag will start after dragging 100px
$('.item').draggable({ 
    containment: [100, 100, 200, 200],
    distance: 100
});
于 2013-05-19T00:51:28.307 に答える