jQuery ui sortable - पर क्लिक स्क्रॉलबार टूट जाता है यह

Question

एक div कि एक .sortable() कंटेनर के भीतर है div खींच जब आप स्क्रॉलबार

बेला में जारी है, वहाँ 3 अलग sortables, उनमें से 1 एक स्क्रॉल है शुरू कर देंगे स्क्रॉल एक

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

बग: नीचे सामग्री के माध्यम से स्क्रॉल करने के लिए स्क्रॉलबार पर क्लिक करें और इसे खींच सकते हैं या, जब आप माउस छोड़ दें, div खींचें करने के लिए जो उसके चारों ओर अपने माउस का पालन करता है शुरू होता है, और वहाँ है पेज को रीफ्रेश किए बिना इसे अनस्टिक करने का कोई तरीका नहीं है।

Answer 1

आप इस तरह jQuery के .mousemove घटना का उपयोग कर सकते हैं:

$('#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/ बनाने की है। उम्मीद है कि यह आपकी ज़रूरत को पूरा करेगा।

Answer 2

sortable()draggable() करता है जैसे हैंडल के लिए चयनकर्ता निर्दिष्ट कर सकता है। फिर केवल मिलान किए गए तत्व क्लिक ईवेंट प्राप्त करते हैं। आप इस तरह हैंडल चयनकर्ता निर्दिष्ट करते हैं:

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

आपके पास पहले से ही बाकी चीज़ों की आवश्यकता है जो आपको बाकी के लिए चाहिए। आपके अतिप्रवाह तत्व पर आंतरिक div एक उपयुक्त हैंडल बनाता है, जैसे:

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

फिर आपको बाकी सब कुछ की क्रमबद्धता बहाल करने की आवश्यकता है। आप लगता है कि आप सिर्फ उन divs handle वर्ग दे सकता है, लेकिन यह बच्चों की तलाश में है, ताकि आप तो जैसे उन सभी को रैप करने के लिए की जरूरत है:

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

Modified fiddle

Answer 3

SubRed के जवाब देने के लिए अनुपूरक:

---

यह मेरी आवश्यकताओं के लिए पूरी तरह से काम किया।

How can I get the browser's scrollbar sizes?

यह अनुमति देता है कोड अलग व्यवस्था पर विभिन्न स्क्रॉलबार चौड़ाई को संभालने के लिए: हालांकि, स्क्रॉलबार 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 के कोड को संशोधित किया गया है। यह अब एक या दोनों स्क्रॉलबार के साथ काम करता है।

मैं भी से कोड का इस्तेमाल किया:

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

या तो स्क्रॉल पट्टी की उपस्थिति निर्धारित करने के लिए और उसके अनुसार चालू करने/sortable कोड के बंद अनुकूलित।

बहुत धन्यवाद।