फ़ायरफ़ॉक्स खींच लेता है यह कैसा div एक छवि

Question

मैं इस HTML, सीएसएस और जावास्क्रिप्ट कोड का उपयोग कर रहा है (एक दस्तावेज़ में एक साथ आप इसे बाहर का परीक्षण करना चाहते हैं) था:

<style type="text/css"> 
#slider_container { 
    width: 200px; 
    height: 30px; 
    background-color: red; 
    display:block; 
} 

#slider { 
    width: 20px; 
    height: 30px; 
    background-color: blue; 
    display:block; 
    position:absolute; 
    left:0; 
} 
</style> 
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $("#slider").mousedown(function() { 
     $(document).mousemove(function(evnt) { 
     $("#test").html("sliding"); 
    }).mouseup(function() { 
     $("#test").html("not sliding"); 
     $(document).unbind("mousemove mouseup"); 
    });}); 

}); 
</script> 

<div id="test">a</div> 
<div id="slider_container"> 
    <div id="slider"></div> 
</div> 

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

स्क्रीनशॉट:

जाहिर नीले div आधा तैनात लाल div में है एक घसीटा जा रहा है। जब आप स्क्रीनशॉट लेते हैं तो विंडोज कर्सर को कैप्चर नहीं करता है, लेकिन यह एक स्टॉप साइन है।

क्या इस डिफ़ॉल्ट व्यवहार को रोकने के लिए कोई रास्ता है?

Answer 1

आपको डिफ़ॉल्ट कार्रवाई को रोकने के लिए ईवेंट हैंडलर से झूठी वापसी करने की आवश्यकता है (टेक्स्ट का चयन, चयन खींचना आदि)। क्रिस्पी द्वारा पोस्ट किए गए कोड के आधार पर, मेरा समाधान है:

$(function() { 
    var sliderMouseDown = false; 

    $("#slider").mousedown(function() { 
     sliderMouseDown = true; 
     return false; 
    }); 
    $(document).mousemove(function(evnt) { 
     if (sliderMouseDown) { 
      $("#test").html("sliding"); 
      return false; 
     } 
    }); 
    $(document).mouseup(function() { 
     if (sliderMouseDown){ 
      $("#test").html("not sliding"); 
      sliderMouseDown = false; 
      return false; 
     } 
    }); 
}); 

Answer 2

इसके साथ गड़बड़ करने के बाद, नट बग, ऐसा लगता है कि फ़ायरफ़ॉक्स स्लाइडर पर mousedown घटना को याद करता है और ऐसा करता है जैसे उपयोगकर्ता ने कुछ पाठ चुनना शुरू कर दिया था (इसलिए "स्टॉप साइन" जिसे आप देख रहे थे)। तो फिर फ़ायरफ़ॉक्स अगले mousedown घटना का व्यवहार करता है जैसे कि उपयोगकर्ता कहीं भी टेक्स्ट खींच रहा था। एक और उचित समाधान हो सकता है, लेकिन बस $("#slider").focus() चाल तब से चलता है जब फ़ायरफ़ॉक्स कर्सर को "रीसेट" करेगा, इसलिए ऐसा नहीं लगता कि उपयोगकर्ता कुछ टेक्स्ट खींच रहा है।

मैं यह भी टिप्पणी करना चाहूंगा कि आप बार-बार बाध्यकारी और अनबाइंडिंग ईवेंट (जो कई ड्रैग करने वाले IE7 के साथ अच्छी तरह से बैठने लगते हैं)। मैं निम्नलिखित की तरह कुछ सुझाव दूंगा, जो प्रतिनिधियों को एक बार बांधता है।

$(function() { 
    var sliderMouseDown = false; 

    $("#slider").mousedown(function() { 
     sliderMouseDown = true; 
    }); 
    $(document).mousemove(function(evnt) { 
     if (sliderMouseDown) { 
      $("#test").html("sliding"); 
     } 
    }); 
    $(document).mouseup(function() { 
     if (sliderMouseDown) 
     { 
      $("#test").html("not sliding"); 
      $("#slider").focus(); //<-- fix the FF issue to reset cursor 
      sliderMouseDown = false; 
     } 
    }); 

});