JQuery यूआई sortable - पुस्तक स्थिति "कूदता" जब

Question

छँटाई इस लगभग समान प्रश्न की जांच करें: jQuery Sortable List - scroll bar jumps up when sorting

मैं बिल्कुल वैसा ही समस्या है, केवल कि मैं कोई भाग्य के साथ सभी सुझाव दिया समाधान की कोशिश की

यहाँ जिस तरह से

• पुन: पेश करने का सृजन एक sortable list
• है यह स्क्रॉल
• नीचे
• पुन: व्यवस्थित करें
आइटम
• स्क्रॉल स्थिति पुस्तक "कूदता" ऊपर

यहाँ कोड है (JSFiddle में यह भी देखना)

एचटीएमएल

<ul id="panel" class="scroll"> 
    <li class="content" style="background-color:red">item1</li> 
    <li class="content" style="background-color:green">item2</li> 
    <li class="content" style="background-color:blue">item3</li> 
    <li class="content" style="background-color:gray">item4</li> 
    <li class="content" style="background-color:yellow">item5</li>  
</ul>​ 

जावास्क्रिप्ट

$(function() { 
    $("#panel").sortable({ 
     items: ".content", 
     forcePlaceholderSize: true 
    }).disableSelection(); 
    $(".content").disableSelection(); 

});​ 

सीएसएस

.scroll{ 
    overflow: scroll; 
    border:1px solid red; 
    height: 200px; 
    width: 150px; 
} 
.content{ 
    height: 50px; 
    width: 100%; 
} 
​ 

यहाँ कोड (JSFiddle में) accepted answer की धारणा (कोई भाग्य के साथ) कोशिश कर के बाद है

मैं समझने की कोशिश कर सकते हैं ऐसा क्यों होता है (सूची दूसरे के लिए "छोटा" हो जाता है), लेकिन इससे बचने के लिए प्लेसहोल्डर्स या हेल्पर्स का उपयोग करने के सभी प्रयासों ने काम नहीं किया आर। मुझे लगता है मैं कोई भाग्य

ब्राउज़र मैंने कोशिश के साथ "स्क्रॉल" विकल्पों में से लगभग किसी भी परिवर्तन की कोशिश की लग रहा है

IE9, फ़ायरफ़ॉक्स 10.0.1, और क्रोम 17

JQuery संस्करणों

कोर 1.7.1, यूआई बनाम 1.8.17

क्या मैं कुछ गलत कर रहा हूं? क्या कोई समाधान है? क्या यह एक बग हो सकता है?

Answer 1

आप जोड़कर .scroll तत्व के लिए अपने सीएसएस modifiy हैं:

position:relative; 

कि इस समस्या को हल करना चाहिए।

Answer 2

को height संपत्ति के बिना भी क्रमबद्ध सूची में जोड़ने के लिए यह मेरे लिए हल किया गया। यह केवल एक अक्षम स्क्रॉलबार दिखाता है, लेकिन यह ठीक है।

Answer 3

jQuery UI की तरह लगता है 1.9.2 समस्या हल हो गई।

आप पुस्तकालय को बदलने में असमर्थ हैं, तो एक सरल स्क्रॉल पट्टी संचालन सहित एक समाधान है। विचार सरल है:

• हर बार स्क्रॉल करते समय पिछली स्क्रॉल स्थिति रखें।
• जब आप अपना तत्व खींचना शुरू करते हैं तो पिछली स्थिति पर वापस स्क्रॉल करें।

ये रहा;

var lastScrollPosition = 0; //variables defined in upper scope 
var tempScrollPosition = 0; 

window.onscroll = function() { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll 
    clearTimeout($.data(this, 'scrollTimer')); 
    $.data(this, 'scrollTimer', setTimeout(function() { 
     tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms. 
    }, 250)); 

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll 
}; 

$("#YourSortablePanel").sortable({ 
    start: function (event, ui) { 
     $(document).scrollTop(tempScrollPosition); 
    } 
}); 

Answer 4

इस कंटेनर बदलते की ऊंचाई के कारण होता है जब (बस से पहले प्लेसहोल्डर बनाई गई है)

समस्या अच्छी तरह से वर्णित है और इस ढेर अतिप्रवाह में उत्तर दिया जाता है छँटाई: https://stackoverflow.com/a/32477389/2604980

Answer 5

아래 로 스크롤 할 때 는 이런 식 으로 하면 됩니다।

var cY = -1; 
var base = 0; 
$("").sortable({ 
    sort: function(event, ui) { 
    var nextCY = event.pageY; 
    if(cY - nextCY < -10){ 
     if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) { 
     base = base === 0 ? event.clientY : base; 
     var move = event.clientY - base; 
     var curScrollY = $(document).scrollTop(); 
     $(document).scrollTop(curScrollY + move+3); 
     base = event.clientY; 
     } 
    } 
    }, 
    // ..... 
});