मेटर

Question

में ड्रैग ईवेंट के साथ डिफ़ॉल्ट को रोकना मैं अपने मीटरी एप्लिकेशन में मूल ड्रैग और ड्रॉप कार्यक्षमता को लागू करने का प्रयास कर रहा हूं। मैं चाहता हूं कि उपयोगकर्ता एक फ़ाइल (उनकी फाइल सिस्टम से) को एक निर्दिष्ट डोम तत्व में छोड़ने में सक्षम हो, और उस फ़ाइल को dataTransfer ऑब्जेक्ट में पुनर्प्राप्त करें। दुर्भाग्यवश, मैं घटना को ड्रॉप ईवेंट पर पूरे पृष्ठ को पुनः लोड करने से रोकने के लिए प्रतीत नहीं कर सकता। यहां मेरा मूल कार्यक्रम हैंडलर है:

Template.sideBar.events({ 

'drop #features' : function(e, t) { 

    e.preventDefault(); 

    var fileList = e.dataTransfer.files; 
    console.log(fileList[0]); 

    return false; 
} 

}); 

मैंने क्रोम और फ़ायरफ़ॉक्स के साथ इसका परीक्षण किया है। क्या मैं कुछ भूल रहा हूँ? क्या किसी ने इसे सफलतापूर्वक कार्यान्वित किया है?

Answer 1

ठीक है, वह मूर्ख था। मुझे लगता है कि मैंने हल निकाल लिया। drop ईवेंट के अतिरिक्त आपको dragover ईवेंट पर preventDefault() पर कॉल करने की आवश्यकता है। यहाँ मेरे कार्य कोड है:

Template.sideBar.events({ 

    'dragover #features' : function(e, t) { 
    e.preventDefault(); 
    $(e.currentTarget).addClass('dragover'); 
    }, 

    'dragleave #features' : function(e, t) { 
    $(e.currentTarget).removeClass('dragover'); 
    }, 

    'drop #features' : function(e, t) { 
    e.preventDefault(); 
    console.log('drop!'); 
    } 

}); 

सुनिश्चित नहीं हैं कि क्यों यह काम करता है, लेकिन यह करता है (कम से कम क्रोम में)।

Answer 2

meteor@1.4.1 को अद्यतन कर रहा है, तो आप भी

'drop #features' : function(e, t) { 
    e.preventDefault(); 
    console.log('drop!'); 

    e.originalEvent.dataTransfer.getData("text"); 
    //without the previous line you won't be able to get dropped file data; 
    console.log('File name: ' + e.originalEvent.dataTransfer.files[0].name); 
}