html5拖拽应用记录及注意点

下面通过代码给大家介绍html5拖拽应用记录，具体代码如下所示：

e.dataTransfer.setData("a","设置的值");
e.dataTransfer.getData("a");
function drop(e)
{
    
    e.dataTransfer.setData("a", e.target.id);
}

拖动元素

被拖动的元素上要加入入draggable="true"属性

一些注意点：

drop 必须配上 dragover，否则事件不生效

document.getElementById('right').ondragover = function (ev) {
    ev.preventDefault(); //阻止向上冒泡
}
document.getElementById('right').ondrop = function (ev) {
    ev.preventDefault(); //阻止向上冒泡
    console.log("放入");
}

react中使用事件必须是驼峰,例如：onDragOver

vue中在ui库组件上加的时候记得加 .native,例如：@drop.native

完整测试案例

    
    
    



    
    
试着把我拖过去
    
试着也把我拖过去

总结

到此这篇关于html5拖拽应用记录的文章就介绍到这了,更多相关html5拖拽应用内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章，希望大家以后多多支持潘少俊衡！