4

jQueryUIの並べ替え可能なリストがドラッグ操作の途中にある場合、ユーザーがマウスを水平方向に移動しているだけの場合でも、jQueryにプレースホルダーの位置を強制的に更新させる方法はありますか？（jQueryの垂直ソート可能ファイルのヒットテストは、マウスが垂直方向に移動した場合にのみ機能するようです。）

文書化されたソリューションが利用できない場合の最後の手段として、ソート可能、ドラッグ可能などの内部をいじくり回すことを含む、文書化されていない、またはハッキーなソリューションは問題ありません。

詳細は次のとおりです。

アイテムを垂直jQueryUIソート可能リストの右側にドラッグした場合、マウスを上下に動かさない限り、リストはソートされません。マウスを上下に動かすと（1pxでも！）、突然リストが並べ替えられます。例はhttp://jsfiddle.net/f3Lhg/にあり、以下から抜粋します。

これはコーナーケースのように見えるかもしれませんが、接続されたリストが1つのリストから別のリストに横方向にドラッグする場合は実際に一般的です。ドラッグ全体が完全に水平でなくても、最初の30px〜100pxは水平である可能性があり、予測できないドラッグ動作とユーザーエクスペリエンスの低下につながります。接続されたリストで問題が発生する場合でも、リストからドラッグして横からリストに戻ることで、単一のリストで簡単に再現できます。

問題はブラウザ固有ではありません。動作は、テストしたすべてのブラウザーで同じでした。また、toleranceオプションを追加しても問題は解決しません。

これはjQueryUIのバグですか、それとも予想される動作ですか？そして、既知の回避策はありますか？

ところで、私のアプリでは右側にリストを接続しているので{axis:'y'}、接続されたリストにドラッグできなくなるため、このオプションを使用できません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
    <style type="text/css">
    .sortable { list-style-type: none; width: 400px; }
    .sortable li { margin: 5px 0; padding: 30px; border: 1px solid #999; }
    .sortable li.placeholder { margin: 0; height: 4px; border: 0; padding: 0; background-color: #800; }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.sortable').sortable({
                placeholder: 'placeholder'
            }).disableSelection();
        });
    </script>
</head>
<body>
    <ul class="sortable">
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
    </ul>
</body>
</html>
4

2 に答える 2

2

jQuery UIソース コードを見ると、これは予期された動作のようです。

axisプロパティ値がどのように設定されているか (または設定されていないか) に基づいて、jQuery UI はプロパティfloatingをブール値フラグとして設定し、コンテナーが垂直リストまたは水平リストのどちらであるかを追跡します (46 行目)。

//Let's determine if the items are being displayed horizontally
this.floating = this.items.length ? o.axis === 'x' || (/left|right/).test(this.items[0].item.css('float')) || (/inline|table-cell/).test(this.items[0].item.css('display')) : false;

この値は、ユーザーが要素をドラッグしているときに、jQuery UI が衝突検出を処理する方法を決定するために使用されます。

具体的には：

このメソッド_intersectsWithSides(492 行目) は、このプロパティfloatingを使用して、水平方向のリストでドラッグしていないことを判断し、垂直方向の衝突結果を返します。垂直衝突チェックは、垂直方向のドラッグ方向と要素の交差の両方がある場合にのみ true を返します。

if (this.floating && horizontalDirection) {
    return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
} else {
    return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf));
}

verticalDirection return 条件から要件を削除することで、問題を解決できる場合があります_intersectsWithSides(予期しないバグのある動作が発生する可能性もあります)。

または:

_intersectsWithSides垂直方向または水平方向のドラッグがある場合に true を返すようにプラグインのメソッドを編集してみてください。

return (verticalDirection || horizontalDirection) && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)) || ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf));
于 2012-10-04T19:10:14.863 に答える
0

すみません、ここで何かを読み間違えたのかもしれません。

問題は、最初のリスト項目をつかんで右端までドラッグし、リストの外に出してから item#4 にドラッグすると、カーソルを少なくとも 1px 上下？

もしそうなら、それが深刻なユーザビリティの問題だとはまったく思いません。上記の例を複製しましたが、マウスを完全に水平に動かすには非常に注意する必要がありました。

さらに、すべてのユーザーの本能は、アイテムをドラッグして、とにかく水平ではなく垂直に移動することだと思います.

于 2012-10-03T13:47:52.977 に答える