火狐不支持，然后关于e.dataRransfer既然是e.属性，那么用全局变量来保存点击对象可行否？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#dragWrap {
display: flex;
justify-content: space-between;
}
.table, .table1 {
text-align: center;
display: flex;
float: left;
flex-wrap: wrap;
width: 500px;
height: 200px;
box-shadow: 0px 0px 10px 0px #000;
}
.tr {
display: flex;
width: 100%;
}
.td {
border: 1px solid #000;
flex: 1;
height: 66px;
cursor: pointer;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.blue {
background: blue;
}
.item {
display: block;
width: 100%;
height: 100%;
transition: all 0.6s;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="dragWrap">
<div class="table">
<div class="tr">
<div class="td">
<span class="item yellow">1</span>
</div>
<div class="td">
<span class="item red">2</span>
</div>
<div class="td">
<span class="item blue">3</span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
</div>
<div class="tr">
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
</div>
<div class="tr">
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
</div>
</div>
<div class="table1">
<div class="tr">
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
</div>
<div class="tr">
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
</div>
<div class="tr">
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
<div class="td">
<span class="item"></span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*通过复制类名和innerHTML实现拖拽 */
$(function () {
//所有拖动对象
var drags = document.querySelectorAll('.item');
var that = {};
//拖动对象
$.each(drags, function (i, _drags) {
$(_drags).attr('draggable', true);
//利用索引值标记每个DOM对象，以便判断是否拖动对象到新的对象当中。192行
_drags.index = i;
_drags.ondragstart = function (e) {
var tar = e.target;
if (tar.tagName.toLowerCase() == 'span' && tar.innerHTML !== "") {
that = tar;
}
};
_drags.ondrop = function (e) {
e.preventDefault();
e.stopPropagation();
var tar = e.target;
if (tar.tagName.toLowerCase() == 'span') {
var thisdata = tar.innerHTML;
var thisclass = $(tar).attr('class');
$(tar).attr('class', $(that).attr('class'));
$(tar).html($(that).html());
if (tar.index !== that.index) {
that.className = thisclass;
that.data = thisdata;
}
}
};
})
})
</script>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 315 人
- 提交作业 136 份
- 解答问题 626 个
如果你有H5、CSS3、JS基础，热爱前端并希望在前端应用方面不断进步，那就来吧，本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等，助你进一步提升前端开发技能
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星