HTML5 Drag and Drop API in Hindi

Posted on by

आज के इस HTML Tutorial in Hindi के इस post में HTML5 Drag and Drop API के बारे मे जानेंगे |

Contents hide
1 html5 drag and drop kya hai ( What is drag and drop in HTML )
2 Javascript drag and drop event

html5 drag and drop kya hai ( What is drag and drop in HTML )

HTML5 drag and drop feature user को किसी element को अन्य स्थान पर खींचने और छोड़ने ( drag and drop ) की अनुमति देता है |

जब हम element को drag करके mouse को move करते है तब उस element का trasferent भाग mouse pointer के साथ-साथ move होता है |

चलो यह किस तरह से काम करता है यह समझने के लिए निचे दिए गए code को अपने text editor में paste करे और HTML format में file को save करे | फिर उस file को web browser में open करे |

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Drag & Drop Example</title>
<script>
    function dragStart(d) {
        // Sets the operation allowed for a drag source
        d.dataTransfer.effectAllowed = "move";
    
        // Sets the value and type of the dragged data
        d.dataTransfer.setData("Text", d.target.getAttribute("id"));
    }
    function dragOver(d) {
        // Prevent the browser default handling of the data
        d.preventDefault();
        d.stopPropagation();
    }
    function drop(d) {
        // Cancel this event for everyone else
        d.stopPropagation();
        d.preventDefault();
    
        // Retrieve the dragged data by type
        var data = d.dataTransfer.getData("Text");
    
        // Append image to the drop box
        d.target.appendChild(document.getElementById(data));
    }
</script>
<style>
    #dropBox {
        width: 310px;
        height: 310px;
        border: 8px dashed gray;
        background: lightyellow;
        text-align: center;
        margin: 30px 0;
        color: red;
    }
    #dropBox img {
        margin: 28px;
    }
</style>
</head>
<body>
    <h2>Drag and Drop Example</h2>
    <p>Drag and drop the image into the box:</p>
    <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
        <!--Dropped image will be inserted here-->
    </div>
    <img src="http://techsamundra.com/wp-content/uploads/2022/10/Tech-samundra.webp" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Tech Samundra">
</body>
</html>

वैसे href attribute में define किये गए text , image आदि most web browser में by default draggable ही होते है , लेकिन फिर भी आप इन elements को draggable attribute में value true set करके draggable बना सकते है |

Javascript drag and drop event

Drag and Drop operation में अलग-अलग stage के लिए अलग-अलग event को सक्रीय किया जाता है , लेकिन drag operation के दौरान mouse event को सक्रीय नहीं किया जाता है , जैसेकि mousemove event

निम्न तालिका आपको सभी drag and drop event का संक्षिप्त अवलोकन ( brief overview ) प्रदान करती है |

EventDescription
ondragstartजब user किसी element को drag करना सुरु करता है तो यह event सक्रीय होती है |
ongragenterजब draggable element को drop target में ले जाया जाता है तब यह event सक्रिय होती है |
ondragoverजब user किसी element को drop target पर खींचता है तब यह event सक्रीय होती है |
ondragleaveकिसी draggable element को drop target से बहार ले जाने पर यह event execute होती है |
ondragकिसी element को drag किया जाता है तब यह event सक्रीय होती है |
ondropकिसी element को drop किया जाता है तब यह event सक्रीय होती है |
ondragendजब drag action successfully complete हो जाता है तब यह event execute होती है |
Javascript drag and drop event