No drop target events fire : Drag Drop Event « Drag Drop « JavaScript Tutorial






<html>
    <head>
        <title>System Drag And Drop Example</title>
        <script type="text/javascript">
            function handleDragDropEvent(oEvent) {
                var oTextbox = document.getElementById("txt1");
                oTextbox.value +=  oEvent.type + "\n";
            }
        </script>
    </head>
    <body>
        <P>Try dragging the text from the textbox to the red square.
        No drop target events fire.</p>
        <P>Drag me</p>
        <div style="background-color: red; height: 100px; width: 100px"
             ondragenter="handleDragDropEvent(event)"
             ondragover="handleDragDropEvent(event)"
             ondragleave="handleDragDropEvent(event)"
             ondrop="handleDragDropEvent(event)"></div></p>
        <P><textarea rows="10" cols="25" id="txt1"></textarea></p>
    </body>
</html>








24.1.Drag Drop Event
24.1.1.No drop target events fire
24.1.2.Drop target events fire now
24.1.3.Get text object from dataTransfer defined the Drag and drop event
24.1.4.Get URL object from dataTransfer defined the Drag and drop event
24.1.5.Get drag and drop event type: dragstart
24.1.6.Get drag and drop event type: dragenter
24.1.7.Get drag and drop event type: dragover
24.1.8.Get drag and drop event type: drop