Article directory

foreword
1. Drag and drop related events
2. Curriculum case
3. All codes
Summarize

foreword

Drag and drop api is a very common api in our front end.
Drag and drop (Drag and Drop) is a very common feature. It's when you grab something and drag it into a different location.
This article mainly uses a case to help everyone understand how to use it.

1. Drag and drop related events

1.ondragstart

Fired once when dragging starts

2.ondragover

Triggered when dragged over a certain element, it will always be triggered

3.bearer

Triggered when dragging over certain elements, it will only be triggered once

4.ondrop

Triggered when the drag is over

2. Curriculum case

1. Page preparation

The first thing is to prepare our page

insert image description here

2. Realize the draggability of elements

You only need to write draggable="true" on the element that needs to be dragged, and the element is in a draggable state.

 <li draggable="true" class="colorRed item">前端开发</li>
<li draggable="true" class="colorBlue item">思想道德</li>
<li draggable="true" class="ColorGreen item">软件工程</li>

3. Realization of functions

1. Block the default event

At this time, we found that when we moved to elements such as div, table, and td, the browser blocked us by default.
At this time we use the preventDefault() method to prevent the default event

// 拖拽事件，当拖拽到莫个元素之上时触发，会一直触发
    container.ondragover=(e)=>{
    
    
        // 由于默认是不能托到表格上面的，阻止默认行为
        e.preventDefault()
    }

2. Add an event and modify the mouse state to copy

Here we can use custom events to mark the element as draggable
insert image description here

// 拖拽事件，当拖拽开始时触发一次
  container.ondragstart=(e)=>{
    
    
    // 修改状态鼠标状态为复制
    e.dataTransfer.effectAllowed = e.target.dataset.state
    }

3. Realize dragging to an element background color change

Add a custom attribute to each td element, so that it can be distinguished from whether it can be dragged into the element.
insert image description here

// 拖拽到某个元素上清除前面所以加的元素
    function clearOverList(){
    
    
        document.querySelectorAll(".over").forEach((node)=>{
    
    
             node.classList.remove('over')
        })
    }
// 获得最外层元素节点
    function getNode(node){
    
    
        while(node){
    
    
            if(node.dataset.drop){
    
    
                return node
            }
            //获得父节点
            node = node.parentNode
        }
    }
// 拖拽事件，当拖拽到莫个元素之上时触发，只会触发一次
    container.ondragenter=(e)=>{
    
    
        clearOverList()
        const dropNode = getNode(e.target)
//    判断是否能够变色
        if( dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed){
    
    
        e.target.classList.add('over')
            
        }
    }

4. Realize the final function