给ondragend设置了preventDefault()，为什么结束拖拽时还会打开新页面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
width: 200px;
height: 200px;
background-color: yellow;
}
.containerDrop {
background-color: green;
}
.target {
width: 100px;
height: 100px;
background-color: pink;
}
.hide {
display: none;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="container" class="container"></div>
<div id="target" class="target" draggable="true"></div>
<img id="image" src="imooc.png" class="hide" />
</body>
</html>
<script>
$(function(){
/* 放下时 */
$("#container")[0].ondrop = function(e){
e.preventDefault();
var id = e.dataTransfer.getData("Text");
$(this).append($('#' + id));
}
/* 进入时 */
$("#container")[0].ondragenter = function(e){
e.preventDefault();
$(this).addClass("containerDrop")
}
/* 离开时 */
$("#container")[0].ondragleave = function(e){
e.preventDefault();
$(this).removeClass("containerDrop");
}
/* 结束时 */
$("#container")[0].ondragover = function(e){
e.preventDefault();
}
/* 开始拖拽 */
$("#target")[0].ondragstart = function(e){
e.dataTransfer.setData("Text",e.target.id);
e.dataTransfer.setDragImage($("#image").clone().removeClass("hide")[0],0,0);
}
/* 结束拖拽 */
$("#target")[0].ondragend = function(e) {
e.preventDefault();
}
})
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星