jQuery यूआई, ड्रैगगेबल, ड्रॉपपेबल, ऑटो स्क्रॉल

Question

मेरे पास ड्रॉप करने योग्य ली तत्वों का एक सेट है जो ड्रैगगेबल आइकन स्वीकार करता है। वस्तुओं की सूची स्क्रोल करने योग्य div तत्व में है। मैंने यहां एक साधारण उदाहरण दिया है: http://www.nerdydork.com/demos/dragscroll/

मैं सोच रहा हूं कि ड्रैगगेबल तत्व खींचते समय तत्वों की सूची को स्वत: स्क्रॉल करने का कोई तरीका है या नहीं। उदाहरण के लिए, मान लीजिए कि आप बीच में कहीं हैं, जैसे http://www.nerdydork.com/demos/dragscroll/#j। जैसे ही आप div के शीर्ष तक पहुंचते हैं, यह स्क्रॉलिंग शुरू हो जाएगा, क्योंकि आप div के नीचे पहुंचते हैं, यह स्क्रॉलिंग शुरू हो जाएगा।

कोई भी जानता है कि इसे jQuery के साथ कैसे पूरा किया जाए?

अद्यतन

मैं करीब हो रही है। मैंने कंटेनर div के ऊपरी भाग को ऊपरी & पर निश्चित div बनाया है। जब उस पर होवर करना http://plugins.jquery.com/project/aautoscroll

अब समस्या तब होती है जब मैं निचले क्षेत्र में होवर करता हूं, तो यह अक्षरों पर मेरे ड्रैगगेबल को गड़बड़ कर देता है। हालांकि यह केवल निम्न ऑटोस्कोल क्षेत्र के साथ एक समस्या प्रतीत होता है। http://screencast.com/t/JBFWzhPzGfz

सूचना कैसे जब यह नीचे autoscrolls, मंडराना सही पत्र खत्म नहीं हुआ है:

बग के बारे में मैं बात कर रहा हूँ देखने के लिए, यह संक्षिप्त वीडियो देखने। वीडियो के अंत में आप देख सकते हैं कि यदि आप सूची के बाएं हाशिए पर होवर करते हैं, तो यह किसी भी तरह रीसेट हो जाता है और फिर से काम करता प्रतीत होता है।

Answer 1

ड्रैगगेबल के लिए "रीफ्रेशपॉजिशन: सच्चा" विकल्प सेट करने से jQuery को प्रत्येक माउस ईवेंट पर ऑफ़सेट को फिर से गणना करने का कारण बन जाएगा। उससे आपकी समस्या हल हो जानी चाहिए।

Answer 2

आप भी एक अंतराल समारोह इस्तेमाल करने की कोशिश कर सकते हैं: http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) { 
    $("#sortableContainer").append('<div class="sortable"></div>'); 
    $("#droppableContainer").append('<div class="droppable"></div>'); 
}; 

var adding = 0 
var scrollInterval = null; 

$("#sortableContainer").sortable({ 
    refreshPositions: true, 
    start: function (e, ui) { 
     scrollInterval = setInterval(function() { 
      var foo = $("#droppableContainer").scrollTop(); 
      $("#droppableContainer").scrollTop(foo + adding); 
     }, 50) 
    }, 
    stop: function (e, ui) { 
     clearInterval(scrollInterval); 
    }, 
    sort: function (e, ui) { 
     var top = e.pageY - $("#droppableContainer").offset().top 
     if (top < 10) { 
      adding = -15 
     } else if (top > $("#droppableContainer").height() - 10) { 
      adding = 15 
     } else { 
      adding = 0 
     } 
    }, 
}); 
$(".droppable").droppable({ 
    hoverClass: "active", 
    accept: ".sortable", 
    drop: function (event, ui) { 
     ui.draggable.remove(); 
    }, 
})