1. घर
  2. सवाल और जवाब
  3. खींचें और छोड़ें - डेटा ट्रांसफर ऑब्जेक्ट

खींचें और छोड़ें - डेटा ट्रांसफर ऑब्जेक्ट

2015-10-29 9 views
8

मैं एक साधारण ड्रैग एन 'ड्रॉप अपलोडर बना रहा हूं और मुझे आश्चर्य है कि मैं console.log(e) (DragEvent) जब मैं ड्रॉप करता हूं तो फ़ाइल क्यों नहीं देख सकता और DragEvent.dataTransfer.files पर देखता हूं खाली दिखाता है, लेकिन ... अगर मैं console.log(e.dataTransfer.files) यह गिराए गए फाइल को दिखाएगा।खींचें और छोड़ें - डेटा ट्रांसफर ऑब्जेक्ट

// कोड

<!DOCTYPE html> 
<html> 
<head> 
<script> 
document.addEventListener("DOMContentLoaded", init); 
function init(){ 
    var dropbox = document.getElementById('dropbox'); 
    dropbox.addEventListener('dragover', drag.over); 
    dropbox.addEventListener('drop', drag.drop); 
} 
var drag = { 
    "over": function(e){ 
     e.preventDefault(); 
    }, 
    "drop": function(e){ 
     e.preventDefault(); 
     console.log(e); //NO FILES SHOWN 
     console.log(e.dataTransfer.files); //FILES in FileList Object 
    } 
}; 
</script> 
<style> 
body{ 
    margin: 0 !important; 
    height: 100vh; 
    width: 100vw; 
    display: flex; 
    justify-content: center; 
} 
#dropbox{ 
    height: 400px; 
    width: 400px; 
    align-self: center; 
    background-color: #0089C4; 
    border-radius: .3em; 
    border: 1px dashed black; 
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40); 
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40); 
} 
</style> 
</head> 
<body> 
    <div id="dropbox"></div>  
</body> 
</html>

स्रोत

2015-10-29 Jordan Davis

+0

समय आप कंसोल में वस्तु पर क्लिक करें इसे बदलने से अधिक फ़ंक्शन के माध्यम से पारित हो सकता है पर इसकी गुण तो आप इसकी अपेक्षा क्यों करेंगे? यदि आपको बाद में इसकी आवश्यकता है, तो आप इसे फ्रीज कर सकते हैं, क्लोन या कॉपी मूल्य। – Buksy

उत्तर

6

खींचें डेटा संग्रह जब आप इसे उपयोग के आधार पर विभिन्न स्वरूप हैं:

  • पर dragstart घटना यह पढ़ने पर है/ मोड लिखें।
  • drop ईवेंट पर, यह में केवल मोड पढ़ा गया है।

  • और अन्य सभी घटनाओं पर, यह संरक्षित मोड में है।

    संरक्षित मोड इस तरह से परिभाषित किया गया है:

सुरक्षित मोड

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

यहाँ देखें: https://html.spec.whatwg.org/multipage/interaction.html#the-drag-data-store

इसका मतलब है कि जब आप अपने कंसोल, जो drop या dragstart घटना पर नहीं है में dataTransfer वस्तु का उपयोग, यह संरक्षित मोड में है डेटा तक पहुँचने से रोक रहा।

आप fileList देखने क्योंकि आप drop घटना पर fileList लॉग इन करें जब dataTransfer पठनीय है सकते हैं। लेकिन अगर आप e.dataTransfer या e लॉग करते हैं, तो आप किसी भी डेटा तक पहुंच नहीं पाएंगे।

आप यहाँ परीक्षण कर सकते हैं, dragover पर भी आप उपयोग कर सकते हैं नहीं है क्या dataTransfer में:

document.querySelector('#droppable').ondragover = function(e) { 
 
    console.log('on dragover files are', e.dataTransfer.files) 
 
    e.preventDefault(); 
 
} 
 

 
document.querySelector('#droppable').ondrop = function(e) { 
 
    console.log('on drop files are', e.dataTransfer.files) 
 
    e.preventDefault(); 
 
}
<div id=droppable>Drop a file</div>

स्रोत

2015-11-02 23:33:46

+0

नाइसिये धन्यवाद! –

संबंधित मुद्दे

 संबंधित मुद्दे