jqueryのUIのソート可能 - クリック、スクロールバーがそれを壊す

Question

スクロール.sortable()コンテナ内にあるdiv要素は、あなたがフィドルでスクロールバー

を離すと、3種類のsortablesがあるdiv要素のドラッグを開始し、それらの1がスクロールしています1

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

バグ：あなたは、マウスを離したときに、divのは、それが周りにマウスを追従させるた、ドラッグを開始している、コンテンツをスクロールするスクロールバーをクリックして、それを上下にドラッグページをリフレッシュせずにそれを取り除く方法はありません。

Answer 1

あなたはこのようにjQueryの.mousemoveイベントを使用することができます。私はここにhttp://jsfiddle.net/aanred/FNzEF/の作品フィドルを作成する必要があり

$('#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"); 
}); 

。あなたの必要を満たすことを願っています。

Answer 2

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

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

残りの部分には、ほとんどの必要なものがあります。

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

次に、あなたが他のすべてのsortabilityを復元する必要があります：あなたの溢れ要素の内側のdivが、このように、適切なハンドルになります。あなたはちょうどそれらのdivにhandleクラスを与えることができると思うだろうが、それは子供たちのために探しているので、あなたはそのようにそれらのすべてをラップする必要があります。

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

Modified fiddle

Answer 3

SubRedの回答に補足：

---

これは私のニーズに完全に対応しました。このコードは、異なる設定で異なるスクロールバーの幅を処理することを可能にする

How can I get the browser's scrollbar sizes?

：ただし、はなく（上記のように）20個の画素であるスクロールバーの幅に依存して、Iからコードを使用します。コードは便宜上ここに貼り付けられます：

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つまたは両方のスクロールバーで動作します。

Iはまたからのコードを使用する：いずれかのスクロールバーの存在を決定するために

Detecting presence of a scroll bar in a DIV using jQuery?

し、それに応じてソート可能なコードのオン/オフを適合。

多くのありがとうございます。