HTML5 में DataTransfer ऑब्जेक्ट

सभी ड्रैग एंड ड्रॉप इवेंट्स के लिए इवेंट लिसनर मेथड्स Event ऑब्जेक्ट स्वीकार करते हैं जिसमें एक रीड-ओनली एट्रिब्यूट होता है जिसे dataTransfer कहा जाता है। event.dataTransfer इवेंट से जुड़े DataTransfer ऑब्जेक्ट को निम्नानुसार लौटाता है:

function EnterHandler(event) { 
    DataTransfer dt = event.dataTransfer; 
    … 
}

आप DataTransfer ऑब्जेक्ट को लागू करने के लिए निम्नलिखित कोड चलाने का प्रयास कर सकते हैं:

<!DOCTYPE HTML> <html> 
    <head> 
        <style> 
            #boxA, #boxB { float:left;padding:10px;margin:10px; -moz-user-select:none; } 
            #boxA { background-color: #6633FF; width:75px; height:75px; } 
            #boxB { background-color: #FF6699; width:150px; height:150px; } 
        </style> 
        <script> 
            function dragStart(ev) { 
                ev.dataTransfer.effectAllowed='move'; 
                ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); 
                ev.dataTransfer.setDragImage(ev.target,0,0); 
                return true; 
            } 
        </script> 
    </head> 
    <body> 
        <center> 
            <h2>Drag and drop HTML5 demo</h2> 
            <div>Try to drag the purple box around.</div> 
            <div id = "boxA" draggable = "true" ondragstart = "return dragStart(ev)"> 
                <p>Drag Me</p> 
            </div> 
            <div id = "boxB">Dustbin</div> 
        </center> 
    </body> 
</html>