डेस्कटॉप से ​​ब्राउज़र पर फ़ाइल खींचते समय 'ड्रैगेंटर' पर ओवरले दिखाएं

Question

मैं imgur.com पर उसी प्रभाव को प्राप्त करने की कोशिश कर रहा हूं (डेस्कटॉप से ​​imgur.com पर फ़ाइल खींचें और आपको एक ठंडा दिखाई देगा ओवरले)। इस पोस्ट के लिए पहले से ही एक समाधान समाधान है: Event propagation, overlay and drag-and-drop events

लेकिन मुझे समाधान असंतुष्ट लगता है। समस्या $ (दस्तावेज़) है। ('ड्रैगेंटर') को बाल तत्वों पर होवर करते समय कई बार निकाल दिया जाता है। मैं एक ऐसी घटना की तलाश में था जब मैं व्यूपोर्ट में प्रवेश करता हूं और जब मैं व्यूपोर्ट छोड़ देता हूं तो मैं ड्रैगेंटर और ड्रैगलेव पर एक साफ $ ओवरले। फीडइन() और .fadeOut() प्राप्त कर सकता हूं।

मैंने इसे एक पारदर्शी तत्व के साथ हल किया जो पूरे व्यूपोर्ट को भरता है। मैं फिर $ (दस्तावेज़) के बजाय उस पारदर्शी तत्व पर ड्रैगेंटर को कॉल करता हूं। $ ('*: दृश्यमान') के साथ। लाइव ('ड्रैगेंटर') मैं फिर छुपा और असली ओवरले दिखाता हूं। $ ('# पारदर्शी ओवरले')। ('ड्रैगलेव') ओवरले को छुपाता है। सुंदर hacky लेकिन यह काम करता है

लेकिन सिर्फ चयनकर्ता $ ('*: दिखाई') (कम से कम सफारी/क्रोम/फ़ायरफ़ॉक्स में)। रहते हैं() मेरे सिर में दर्द देता है ...

किसी को भी एक बेहतर है सुझाव?

Answer 1

आपको और अधिक कोड/त्रुटियों का सामना करने की आवश्यकता हो सकती है। क्या आपने यह जांचने के लिए एक सरल बूलियन की कोशिश की है कि आपकी घटना कब निकाल दी गई है और बाद की घटनाओं को सीमित कर दिया गया है?

var dragging = false; 

$(document).on('dragenter', function(){ 
    if(!dragging){ 
     //DO SOMETHING 
     dragging = true; 
    } 
}); 

$(document).on('dragleave', function(){ 
    if(dragging){ 
     //DO SOMETHING 
     dragging = false; 
    } 
}); 

Answer 2

ऐसा करने की कोशिश करें, जो मेरे लिए अच्छा काम करता है। मूलतः, यह dragenter और dragleave घटनाओं की नकल है, लेकिन केवल dragover का उपयोग कर:

;(function() { 
    var isOver = false, interval; 

    $(document).on('dragover', function(e) { 
     e.preventDefault(); 

     clearInterval(interval); 

     interval = setInterval(function() { 
      isOver = false; 
      clearInterval(interval); 

      /*** callback for onDragLeave ***/ 
     }, 100); 

     if (!isOver) { 
      isOver = true; 

      /*** callback for onDragEnter ***/ 
     } 
    }); 
})(); 

Answer 3

ऊपर जवाब का एक और अधिक हल्के संस्करण:

;(function() { 
    var dragTimeout; 

    $(document).on('dragenter', function(e) { 
     // dragenter code 
    }); 

    $(document).on('dragleave', function(e) { 
     dragTimeout = setTimeout(function() { 
      dragTimeout = undefined; 
      // your dragleave code 
     }); 
    }); 

    $(document).on('dragover', function(e) { 
     if (dragTimeout) { 
      clearTimeout(dragTimeout); 
      dragTimeout = undefined; 
     } 
    }); 
})();