«
JS 拖拽API

时间:2023-12-8    作者:范文泉    分类: 编程


将元素添加 draggable="true" 将元素变为可拖拽

ondragstart = (e)=>{
    e.dataTransfer.effectAllowed //move与copy
}

ondragover

const clearDropStyle = ()=>{
    //清除之前的drop-over
    document.querySelectorAll('drop-over').foreach((node)=>{
        node.classList.remove('drop-over');
    })
}

ondragenter = (e)=>{
    clearDropStyle();

    const dropNode = e.target;
    if(dropNode.dataset.drop === e.dataTransfer.effectAllowed){
        e.target.classList.add('drop-over');
    }
}

ondrop = (e)=>{
    clearDropStyle();
    cloneNode()..
}