क्या ब्राउजर से डेस्कटॉप पर फ़ाइल को ड्रैग करना संभव है, डाउनलोड डाउनलोड हो रहा है?

Question

मेरे पास एक ऐप है जो फ़ाइलों को संग्रहीत करता है और उन्हें अपलोड करने के लिए ड्रैग + ड्रॉप का उपयोग करता है। क्या कोई तरीका है जिसे मैं "डाउनलोड" पर क्लिक करने के बजाय फ़ाइल को अपने डेस्कटॉप पर डाउनलोड करने के लिए खींच सकता हूं। असल में, ड्रैग + ड्रॉप अपलोड के विपरीत।

Answer 1

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

Answer 2

यह केवल Google क्रोम में समर्थित है।
http://www.html5rocks.com/en/tutorials/dnd/basics/#toc-desktop-dnd-out उदाहरण के लिए इसे जीमेल में लागू किया गया है।

कोई भी अन्य ब्राउज़र इस व्यवहार का समर्थन नहीं करता है।

Answer 3

html5rocks और cssninja ठीक हैं, लेकिन मुझे लगता है कि त्वरित उत्तरों के लिए रास्ता ओवरकिल है। फ़ाइलों को डाउनलोड करने सहित कुछ से ड्रैग इवेंट्स का उपयोग करने का एक सरल उदाहरण यहां दिया गया है।

<style> 
div { background-color: #eee; border: 1px solid black; padding: 5px; float: left; clear: both; } 
</style> 
<div id="uiLinkText"   draggable="true">Drag <b>Text</b> to a text editor </div> 
<div id="uiLinkHyperlink"  draggable="true">Drag <b>Hyperlink</b> to address bar </div> 
<div id="uiLinkUrlDownload" draggable="true">Drag <b>Url Download</b> to file system </div> 
<div id="uiLinkStaticDownload" draggable="true">Drag <b>Static Download</b> to file system </div> 
<script> 
document.getElementById('uiLinkText').ondragstart = function(event){ 
    // plain text, for dropping into text editor 
    event.dataTransfer.setData('text/plain', 'Go to http://stackoverflow.com/questions/5411481/ to read about this.'); 
} 
document.getElementById('uiLinkHyperlink').ondragstart = function(event){ 
    // URL, for dropping into the browser's address bar 
    event.dataTransfer.setData('text/uri-list', 'http://stackoverflow.com/questions/5411481/'); 
} 
document.getElementById('uiLinkUrlDownload').ondragstart = function(event){ 
    // file download contents, for dropping into a file system 
    event.dataTransfer.setData('DownloadURL', 'text/plain:SourceQuestion.html:http://stackoverflow.com/questions/5411481/') 
} 
document.getElementById('uiLinkStaticDownload').ondragstart = function(event){ 
    var textToWrite = 'file contents here'; 
    var textFileAsBlob = new Blob([textToWrite], { type: 'text/xml' }); 
    var url = window.URL.createObjectURL(textFileAsBlob); 
    // file download contents, for dropping into a file system 
    event.dataTransfer.setData('DownloadURL', 'text/plain:Static.txt:' + url) 
} 
</script> 

चेतावनी: एक ओर जहां यह स्थानीय स्तर पर क्रोम में मेरे लिए ठीक काम किया, जब मैं एक linke के लिए jsfiddle पर डालने की कोशिश की, "स्टैटिक डाउनलोड" काम नहीं किया (विंडोज 7 में), और "यूआरएल डाउनलोड" क्रैश Google क्रोम।

अधिकांश ड्रैग-एंड-ड्रॉप के साथ, यह एमएसआईई 9 के साथ काम नहीं करता है, मैंने 10+ या फ़ायरफ़ॉक्स की कोशिश नहीं की है।