最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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
试着把我拖过去
试着也把我拖过去
相关文章
- 2024金摇杆奖年度游戏名单 11-22
- 用针在纸上绣画是哪种非遗技艺 蚂蚁新村11月21日答案最新 11-22
- 重返未来1999纸信圈儿什么时候up 为什么故事集卡池活动介绍 11-22
- 重返未来1999雾中盛会怎么玩 UTTU聚光专栏雾中盛会活动介绍 11-22
- 光遇姆明季后续版本怎么玩 光遇音乐节宴会节活动介绍 11-22
- 无期迷途四星装束是谁 无期迷途首个四星装束剪影介绍 11-22