SoFunction
Updated on 2025-04-10

JS implements simple drag and drop effect

accomplish

<div>
    <div  ondragstart="dragstart_handler(event);" draggable="true">
        Drag me below！
    </div>
</div>
<div  ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Target area</div>

Add a little dot style:

div {
    margin: 0em;
    padding: 2em;
}
#source {
    color: #009688;
    border: 1px solid #009688;
}
#target {
    border: 1px solid black;
}

The JS script is as follows:

function dragstart_handler(event) {
    ("dragStart");
    // Set the format and data of dragging:: Use the id of the event target as the data    ("text/plain", );
}
function dragover_handler(event) {
    ("dragOver");
    ();
}
function drop_handler(event) {
    ("Drop");
    ();
    // Get the id data of the drag and drop target    var data = ("text");
    ((data));
    ();
}

Summarize

Today this is just a simple example, and we can achieve more results on this basis in the future.

This is the end of this article about JS implementing simple drag and drop effects. For more related JS implementing drag and drop content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!