一聚教程网:一个值得你收藏的教程网站

热门教程

html5拖拽应用记录及注意点代码实例

时间:2022-06-25 17:56:21 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下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

完整测试案例




    
    Title
    


试着把我拖过去

试着也把我拖过去

热门栏目