Using the new feature of HTML5 to drag and drop to exchange table cell elements

Using the new feature of HTML5 to drag and drop to exchange table cell elements

What's new in HTML5: drag and drop

Drag and drop

Drag and Drop is a very common feature. It means you grab something and drag it into different positions.

Drag and drop is part of the HTML5 standard: any element can be dragged and dropped.

Browser support

The numbers in the table indicate the first browser version that fully supports drag and drop.

HTML drag and drop instance

The following is a simple example of drag and drop:


function allowDrop(ev) {

function drag(ev) {

function drop(ev) {
    var data = ev.dataTransfer.getData("text");;

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">


Example URL: W3School TIY Editor

Drag and drop event details

  1. Make elements drag and drop

    First, to make an element drag and drop, set its draggable attribute to true:

    <img draggable="true">
  2. Set the contents of drag and drop - ondragstart and setData()

    Then, specify what happens when the element is dragged.

    In the above example, the ondragstart attribute calls a drag(event) function to specify what data to drag.

    The dataTransfer.setData() method sets the data type and value of the dragged data:

    function drag(ev) {

    In this case, the data type is "text" and the value is the id ("drag1") of the draggable element.

  3. Set where to drag - ondragover

    The ondragover event specifies where the dragged data can be placed.

    By default, data / elements cannot be placed in other elements. In order to implement drag and drop, we must prevent this default processing of elements.

    This task is completed by the event.preventDefault() method of the ondragover event:

    function allowDrop(ev) {
  4. Place - ondrop

    When the dragged data is released, a drop event occurs.

    In the above example, the ondrop attribute calls a function, drop(event):

    function drop(ev) {
        var data = ev.dataTransfer.getData("text");;
    Code interpretation:
    • Call preventDefault() to block the browser's default handling of data (the default behavior of drop events is to open as links)

    • Get the dragged data through the dataTransfer.getData() method. This method will return any data set to the same type in the setData() method

    • The dragged data is the id ("drag1") of the dragged element

    • Append the dragged element to the drop element

Project practical application

       style="table-layout: fixed; line-height: 45px; font-size: 16px;"
    <tr style="background-color: rgb(132 188 247); color: rgb(255, 255, 255); text-align: center;">
        <th>time slot</th>
    <tr style="text-align: center;">
        <td>time slot</td>
        <!-- The unimportant part has been omitted. It mainly realizes the drag and drop exchange of the following two cells -->
            <div @drop="drop($event)" @dragover="allowDrop($event)" 
            draggable="true" @dragstart="drag($event)" :id="">
            <div @drop="drop($event)" @dragover="allowDrop($event)"
            draggable="true" @dragstart="drag($event)" :id="">
// Drag and drop to exchange elements in cells
function allowDrop(ev: any) {
// Triggered when dragging
function drag(ev: any) {
    ev.dataTransfer.setData("id",; = "1px solid yellow"; = "pointer";
// Trigger after lowering
function drop(ev: any) {
    var data = ev.dataTransfer.getData("id");
    swapElements(document.getElementById(data), ev.currentTarget); = "1px solid yellow"; = "pointer";
    // Send exchange request'/apply/manager/arrange', {
        "method": "exchange",
        "shiftFirstId": data,
    }).then((res: any)=>{
        if (res.code === 200) {
        } else {
// Exchange element
function swapElements(a: any, b: any) {
    // Swap two dom elements
    if (a == b) return;
    //Record parent element
    var bp = b.parentNode;
    var ap = a.parentNode;
    //Record the next sibling element
    var an = a.nextElementSibling;
    var bn = b.nextElementSibling;
    //If the reference is an adjacent element, adjust the position directly
    if (an == b) return bp.insertBefore(b, a);
    if (bn == a) return ap.insertBefore(a, b);
    if (a.contains(b)) {
        //If a contains b
        return ap.insertBefore(b, a), bp.insertBefore(a, bn);
    } else {
        return bp.insertBefore(a, b), ap.insertBefore(b, an);

Pit record

  1. Because the drag and drop exchange of two elements is required, both elements should set draggable to true and bind ondrop, ondragstart and ondragover events.
  2. In the drop method, cannot be simply used. If this method is actually used to append the content of element 1 to the dom of element 2, the exchange effect cannot be achieved.
  3., cannot be used for interchange, and bug s will occur.

Tags: Javascript Front-end html5

Posted on Wed, 20 Oct 2021 21:17:14 -0400 by jamiefoxx