2013-05-29 7 views
11

का उपयोग करते समय स्क्रॉल करें, मैंने पाया कि एचटीएमएल 5 ड्रैग और ड्रॉप का उपयोग करते समय - पेज स्क्रॉल करने के लिए मूसहेल या माउस पैड का उपयोग करने का प्रयास करने से काम नहीं होगा और घटना के लिए श्रोताओं को बुलाया नहीं जा रहा है।एचटीएमएल 5 ड्रैग और ड्रॉप

एक उदाहरण के रूप यहाँ देखें: http://jsfiddle.net/92u6K/2/

jQuery

var $dragging = null; 
    $('.item').bind('dragstart', function(e) { 
     $dragging = $(e.currentTarget) 
    }); 

    $('.item').bind('dragover', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 

    $('.item').bind('drop', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 

     $dragging.unbind(); 
     $dragging.insertBefore($(e.currentTarget)); 
    }); 

(उदाहरण ताकि आप आइटम खींचने और स्क्रॉल करने के प्रयास करने से कोशिश कर सकते हैं स्क्रॉलबार के साथ 20 divs से पता चलता एक ही समय)

मैंने पाया वहाँ अब कुछ वर्षों के लिए एक बग फ़ायर्फ़ॉक्स के लिए खुला है: https://addons.mozilla.org/en-US/firefox/addon/drag-to-scroll-reloaded/

मैं क्रोम में किसी भी इसी तरह बग नहीं पा सके: https://bugzilla.mozilla.org/show_bug.cgi?id=41708

और अगर कोई इस व्यवहार का समर्थन करने के एक विस्तार बनाया। क्या इसके लिए कोई समाधान है जो क्रोम में भी काम करता है?

संपादित करें: यह सफारी में काम करता है, इसलिए क्रोम और फ़ायरफ़ॉक्स में व्यवहार मौजूद है।

+2

क्या आप इसे स्क्रॉल करने के लिए नीचे के div को खींचने से संतुष्ट नहीं हैं? यह डिजाइन द्वारा ऐसा ही है। – howderek

+0

क्या आप एक लिंक प्रदान कर सकते हैं? मैं इसके लिए एक कारण नहीं सोच सकता। मुझे बस सफारी में ड्रैग और स्क्रॉल काम मिल गया। – mbdev

+1

मुझे समाधान मिला: [jQueryDndPageScroll] (https://github.com/martindrapeau/jQueryDndPageScroll) – luzny

उत्तर

0

जैसा कि @ होउडेरेक ने अपनी टिप्पणी में कहा है, पृष्ठ के निचले हिस्से में div खींचकर पृष्ठ को स्वचालित रूप से स्क्रॉल कर दिया जाएगा।

लेकिन अगर आप एक jQuery प्लगइन का उपयोग कर सकते jQueryDndPageScroll. बुलाया अपने वेबपेज में यह लागू करने के लिए अपने कोड में ये पंक्तियां जोड़ने के रूप में सरल है:

<script type="text/javascript" src="/js/jquery.dnd_page_scroll.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $().dndPageScroll(); 
    }); 
</script> 

इस प्लग खुला स्रोत है। तो आप देख सकते हैं कि हुड के नीचे क्या चल रहा है।

वैकल्पिक रूप से, आप इस क्रॉस-ब्राउज़र को बनाने के लिए W3C का सुझाव दे सकते हैं। यहां शुरू करें https://discourse.wicg.io/। आप वहां एक मंच शुरू कर सकते हैं और यदि उस मंच पर ध्यान देने योग्य ध्यान दिया जाता है, तो W3C इसे सभी ब्राउज़रों के लिए मानक बना सकता है। अधिक जानकारी के लिए this question देखें।

अंतिम विकल्प एक बहुत लंबी प्रक्रिया है और इस बात की कोई गारंटी नहीं है कि आपका सुझाव मानक के रूप में लागू किया जाएगा। लेकिन अगर आप अपनी समस्या स्पष्ट रूप से बताते हैं और आप दूसरों द्वारा ध्यान देते हैं, तो सफलता की एक अच्छी संभावना है।

-2

मैं इस में मदद मिलेगी

$(document).keydown(function(e) { 
switch(e.which) { 
    case 37: // left 
    break; 

    case 38: // up 
    break; 

    case 39: // right 
    break; 

    case 40: // down 
    break; 

    default: return; // exit this handler for other keys 
} 
e.preventDefault(); 
}); 

यह तीर कुंजी के आधार पर खींच की सुविधा दे देंगे जोड़ने लगता है कि दबाया

+1

सवाल माउस के प्रयोग से तत्व खींचते समय स्क्रॉलिंग के बारे में है, इसलिए कीबोर्ड तीर प्रासंगिक नहीं हैं। – mbdev

0

मुझे विश्वास है कि यह इस समस्या के लिए एक समाधान हो सकता है। इस StackOverflow link पर आपके पास JSfiddle का उत्तर है और आप एक ही समय में खींच और स्क्रॉल कर सकते हैं।

जब आप कोई तत्व खींच रहे हों तो आप ऑटोस्कोल के लिए माउस को ऊपर या नीचे पृष्ठ पर ले जाकर पृष्ठ स्क्रॉल कर सकते हैं, या आप एक ही समय में माउस व्हील खींचने और घुमाने के लिए क्लिक कर सकते हैं।

संबंधित मुद्दे