सीएसएस: चित्र खींचने और Firefox

Question

में काम नहीं करता

मैं चारों ओर उपयोगकर्ता छवि को क्लिक जब एक छवि को स्थानांतरित करने के कोशिश कर रहा हूँ आगे बढ़ शुरू होता है: DEMO यह क्रोम में काम करता है, लेकिन एफएफ में अजीब व्यवहार है

एचटीएमएल :

<div id="parent"> 
    <img .... > 
</div> 

और मैं जावास्क्रिप्ट को संभालने के रूप में

जे एस प्रकार है:

var move = false, prevX; 
$('img').on('mousedown', function(e) { 
    move = true; 
    prevX = e.pageX; 
}) 
    .on('mousemove', function(e) { 
     if (move === true) { 
      var x = parseInt($(this).css('left')) + e.pageX - prevX; 
      $(this).css('left', x); 
      prevX = e.pageX; 
     } 
}) 
    .on('mouseup', function(e) { 
     move = false; 
}); 

(मेरे अपने कोड में मैं कुछ और करता हूं क्योंकि आपको कुछ सीमाओं के बाहर छवि को स्थानांतरित करने की अनुमति नहीं है)

मुझे नहीं पता क्यों, लेकिन फ़ायरफ़ॉक्स में आप छवि का चयन कर सकते हैं और फिर यह ' अब काम नहीं करते हैं। एफएफ में इसे ठीक करने के लिए कोई सुझाव?

Answer 1

आप अपने mousedown हैंडलर में झूठी वापस जाने के लिए डिफ़ॉल्ट ब्राउज़र व्यवहार को रोकने के लिए की जरूरत है:

$('img').on('mousedown', function(e) { 
    move = true; 
    prevX = e.pageX; 
    return false; 
}) 

http://jsfiddle.net/7Lhf3/5/

Answer 2

इस अवरोध अपने जावास्क्रिप्ट के शीर्ष करने के लिए

$(document).on("dragstart", function() { 
    return false; 
}); 

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

FIDDLE