dragleave事件
为什么我把调查内容拖拽并移入到#container里面去的时候，会出发dragleave事件？
我的操作仅仅是拖拽并移入到#container里面，并没有移出#container。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>drag</title>
<script type="text/javascript" src="../jquery-3.0.0.min.js"></script>
<style type="text/css">
.page{
width: 1000px;
margin: 0 auto;
}
.left{
width: 500px;
float: left;
}
.left .container{
padding: 10px;
min-height: 500px;
box-sizing: border-box;
}
.left .containerDrop{
background-color: #eeeeee;
}
.left .container h1{
text-align: center;
}
.right{
width: 500px;
float: left;
box-sizing: border-box;
border-left: 1px solid red;
}
.right .ctrlList{
padding: 10px;
}
.right .ctrlList .box{
border: 1px dashed gray;
margin-top: 10px;
margin-bottom: 10px;
}
.line{
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div class="page">
<div class="left">
<div id="container" class="container">
<h1>问卷</h1>
</div>
</div>
<div class="right">
<div class="ctrlList">
<div class="box" draggable="true">
<div class="line">
<span>姓名：</span>
<input type="text" name="name" placeholder="请输入真实姓名">
</div>
</div>
<div class="box" draggable="true">
<div class="line">
<span>年龄：</span>
<input type="text" name="age" placeholder="请输入真实年龄">
</div>
</div>
<div class="box" draggable="true">
<div class="line">
<span>性别：</span>
<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>
</div>
</div>
<div class="box" draggable="true">
<div class="line">
<span>兴趣爱好：</span>
<label><input type="checkbox" name="hobby" value="basketball">篮球</label>
<label><input type="checkbox" name="hobby" value="football">足球</label>
<label><input type="checkbox" name="hobby" value="tennis">网球</label>
<label><input type="checkbox" name="hobby" value="badminton">羽毛球</label>
<label><input type="checkbox" name="hobby" value="tabletennis">乒乓球</label>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
var dragSrc;
$('.box').each(function(index,ele){
$(ele).on('dragstart',function(event){
dragSrc = this;
});
});
$('#container').on('drop',function(e){
e.preventDefault();
$(this).append($(dragSrc).find('.line').clone());
$(this).removeClass('containerDrop');
}).on('dragover',function(e){
e.preventDefault();
}).on('dragenter',function(e){
e.preventDefault();
$(this).addClass('containerDrop');
console.log('dragenter');
}).on('dragleave',function(e){
e.preventDefault();
$(this).removeClass('containerDrop');
console.log('dragleave');
});
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星