HTML5 के साथ JavaScript फ़ाइल ड्रॉप

ड्रैग एंड ड्रॉप (DnD) एक शक्तिशाली यूज़र इंटरफ़ेस अवधारणा है जो माउस क्लिक की मदद से आइटम्स को कॉपी, रीऑर्डर और डिलीट करना आसान बनाती है। यह उपयोगकर्ता को एक एलिमेंट पर माउस बटन दबाकर रखने, उसे दूसरी जगह खींचने, और माउस बटन छोड़कर एलिमेंट को वहां ड्रॉप करने की अनुमति देता है।

ड्रैग एंड ड्रॉप के लिए:

<!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>