7

コンテナ内のdivをスクロールすると.sortable()、スクロールバーを離したときにdivのドラッグが開始されます

フィドルには、3つの異なる並べ替え可能要素があり、そのうちの1つはスクロールするものです。

http://jsfiddle.net/wnHWH/1/

バグ：スクロールバーをクリックして上下にドラッグし、コンテンツをスクロールします。マウスを離すと、divがドラッグを開始します。これにより、マウスを追いかけ、ページを更新せずにスティックを解除する方法がありません。

4

3 に答える 3

5

.mousemove次のように jquery のイベントを使用できます。

$('#sortable div').mousemove(function(e) {
    width = $(this).width();
    limit = width - 20;
    if(e.offsetX < width && e.offsetX > limit)
        $('#sortable').sortable("disable");
    else
        $('#sortable').sortable("enable");
});

ここで動作するフィドルを作成しましたhttp://jsfiddle.net/aanred/FNzEF/。それがあなたのニーズを満たすことを願っています。

于 2012-12-01T07:18:17.477 に答える
4

sortable()と同じように、ハンドルのセレクターを指定できますdraggable()。次に、一致した要素のみがクリック イベントを取得します。次のようにハンドル セレクターを指定します。

$('#sortable').sortable( {handle : '.handle'});

残りのために必要なものは、すでにほとんど揃っています。オーバーフロー要素の内側の div は、次のように適切なハンドルを作成します。

<div style="height: 200px;overflow:auto">
    <div class="handle" style="height: 300;">
        blah
        blah
        blah

次に、他のすべてのソート可能性を復元する必要があります。これらの div にクラスを与えることができると思うかもしれませんがhandle、それは子を探しているので、次のようにすべてをラップする必要があります。

<div><div class="handle">asadf</div></div>

修正されたフィドル

于 2012-12-01T07:19:07.063 に答える
3

SubRedの回答への補足：

これは私のニーズに完全に対応しました。ただし、(上記のように) スクロールバーの幅が 20 ピクセルであることに依存するのではなく、次のコードを使用しました。

ブラウザのスクロールバーのサイズを取得するにはどうすればよいですか?

これにより、コードはさまざまなセットアップでさまざまなスクロールバー幅を処理できます。便宜上、コードをここに貼り付けます。

function getScrollBarWidth () 
{
    var inner = document.createElement('p');
    inner.style.width = "100%";
    inner.style.height = "200px";

    var outer = document.createElement('div');
    outer.style.position = "absolute";
    outer.style.top = "0px";
    outer.style.left = "0px";
    outer.style.visibility = "hidden";
    outer.style.width = "200px";
    outer.style.height = "150px";
    outer.style.overflow = "hidden";
    outer.appendChild (inner);

    document.body.appendChild (outer);
    var w1 = inner.offsetWidth;
    outer.style.overflow = 'scroll';
    var w2 = inner.offsetWidth;
    if (w1 == w2) w2 = outer.clientWidth;

    document.body.removeChild (outer);

    return (w1 - w2);
}

また、スクロールバーの高さに幅の値を使用し、それに合わせて SubRed のコードを修正しました。これは、1 つまたは両方のスクロールバーで機能するようになりました。

次のコードも使用しました。

jQueryを使用してDIV内のスクロールバーの存在を検出していますか?

いずれかのスクロール バーの存在を判断し、それに応じて並べ替え可能なコードのオン/オフを調整します。

どうもありがとう。

于 2012-12-01T22:53:34.783 に答える