麻烦老师看看为什么我这在拖动时有时候会出现鼠标还未松开，灰色背景即消失的情况？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Drag</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<style type="text/css">
.page{
width: 1000px;
margin: 0px auto;
}
.left{
width: 500px;
float: left;
}
.left .container{
padding: 10px;
min-height: 500px;
box-sizing: border-box;
}
.left .containerDrop{
background-color: #eee;
}
.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 class="container" id="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>
<lable><input type="radio" name="gender" value="male"/>男</lable>
<lable><input type="radio" name="gender" value="female"/>女</lable>
</div>
</div>
<div class="box" draggable="true">
<div class="line">
<span>兴趣爱好：</span>
<lable><input type="checkbox" name="hobby" value="basketball"/>篮球</lable>
<lable><input type="checkbox" name="hobby" value="football"/>足球</lable>
<lable><input type="checkbox" name="hobby" value="tennis"/>网球</lable>
<lable><input type="checkbox" name="hobby" value="badminton"/>羽毛球</lable>
<lable><input type="checkbox" name="hobby" value="tabletennis"/>乒乓球</lable>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
(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");
}).on("dragleave",function(e){
e.preventDefault();
$(this).removeClass("containerDrop");
});
})(jQuery);
</script>
</body>
</html>
正在回答
同学你好，有可能是你操作的问题，这个不太好判断。不过老师这边测试着代码正常，所以没有关系，这个问题不用纠结了，继续往下学习吧。
祝学习愉快！
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星