为什么还是覆盖，浏览器没有报错
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽拼图</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
ul{
width: 600px;
}
li{
list-style-type: none;
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li draggable="true"><img src="images/2.jpg"></li>
<li draggable="true"><img src="images/1.jpg"></li>
<li draggable="true"><img src="images/3.jpg"></li>
<li draggable="true"><img src="images/6.jpg"></li>
<li draggable="true"><img src="images/8.jpg"></li>
<li draggable="true"><img src="images/4.jpg"></li>
<li draggable="true"><img src="images/9.jpg"></li>
<li draggable="true"><img src="images/5.jpg"></li>
<li draggable="true"><img src="images/7.jpg"></li>
</ul>
</div>
<script type="text/javascript">
(function($){
var dragSrc;
$('li').each(function(index,ele){
$(ele).on("dragstart",function(e){
dragSrc =this;
e.originalEvent.dataTransfer.setData("text/html",this.innerHTML);
}).on("dragover",function(e){
e.preventDefault();
}).on("drop",function(e){
if(dragSrc != this){
dragSrc.innerHTML = this.innerHTML;
this,innerHTML = e.originalEvent.dataTransfer.getData("text/html");
}
});
})
})(jQuery);
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，可以参考下面的解释：
(function($) {
//定义变量
var dragSrc;
//使用each循环所有的li，function参数中index是索引，ele是每一个li元素
$('li').each(function(index, ele) {
//给每一个li元素绑定dragstart开始拖拽事件
$(ele).on("dragstart", function(e) {
//将当前拖拽的元素赋值给之前定义的变量
dragSrc = this;
//将当前拖拽的元素内容，也就是img通过数据传递
e.originalEvent.dataTransfer.setData("text/html", this.innerHTML);
}).on("dragover", function(e) {
//绑定dragover事件，默认是不允许拖放的，然后阻止默认事件
e.preventDefault();
}).on("drop", function(e) {
//绑定drop事件
//判断如果拖拽的元素与放置的目标元素（也就是当前元素）不相等的话，就执行代码
if (dragSrc != this) {
//将当前元素的内容赋值给拖拽元素的内容
dragSrc.innerHTML = this.innerHTML;
//将传递过来的数据赋值给当前元素的内容
this.innerHTML = e.originalEvent.dataTransfer.getData("text/html");
}
});
})
})(jQuery);上一个拖拽案例中已经给同学解释过全部的js代码了，这些拖拽的案例都是相似的，同学是具体哪里不明白吗？可以详细的描述一下，便于准确定位你的问题。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星