只需添加一个Jquery文件就可以使用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0; padding: 0;
}
html,body{width: 100%; height: 100%; overflow: hidden;}
.main{
width: 900px;
height: 80px;
margin: 50px auto;
}
.main ul{
list-style: none;
}
.normal {
display: inline-block;
width: 100px; height: 120px;
border-radius: 6px;
margin-left: 5px;
background: darkcyan;
color: yellow; font-size: 30px;
font-family: "微软雅黑";
text-align: center; line-height: 120px;
}
.dragele {
list-style: none;
position: absolute;
width: 100px; height: 120px;
border-radius: 6px;
border: 1px dashed black;
background: rgba(0,0,0,0.5);
color: yellow; font-size: 30px;
font-family: "微软雅黑";
text-align: center; line-height: 120px;
}
.info{
width: 900px;
height: 300px;
line-height: 300px;
font-size: 40px;
font-family: "微软雅黑";
font-weight: bold;
text-align: center;
color: grey;
margin: 30px auto;
}
</style>
<script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="main">
<ul>
<li class="normal">15</li>
<li class="normal">6</li>
<li class="normal">18</li>
<li class="normal">56</li>
<li class="normal">3</li>
<li class="normal">22</li>
<li class="normal">52</li>
<li class="normal">13</li>
</ul>
</div>
<div class="info">
</div>
</body>
<script type="text/javascript">
var that;//保存点击的Dom元素
var $li = null;//新生成可拖拽的Dom元素
var mousepos;//鼠标在点击元素的相对位置
var downindex;//点击的dom元素在ul中的索引值
var targetindex;//目标dom元素在ul中的索引值
var swapable;//是否可以交换
//鼠标点击事件
$(".normal").on("mousedown",function(e){
that = $(this);
$li = $("<li>");//新生成一个li元素
$li.addClass("dragele");//添加dragele类
downindex = $(".normal").index($(this));//记录索引值
$li.css({left:$(this).offset().left,top:$(this).offset().top,position:"absolute"})//初始位置
$li.text($(this).text());//给$li添加点击dom元素的文本
$(document.documentElement).append($li);//将$li添加到html中
mousepos = {
x : e.offsetX,
y : e.offsetY
};
$(document).on("mousemove",move);//绑定移动事件
})
//绑定鼠标松开事件
$(document).on("mouseup",function(e){
$(document).off("mousemove",move);//清除鼠标移动事件
if($li == null)return;//如果$li是空,结束函数
$li.remove();//清除$li
if(swapable){//如果为true,则可以交换
var $copydown = that.clone();//copy点击的dom元素
//初始位置
$copydown.css({position:"absolute",left:that.offset().left-5,top:that.offset().top});
var $copytarget = $(".normal").eq(targetindex).clone();//copy目标元素
//初始位置
$copytarget.css({position:"absolute",left: $(".normal").eq(targetindex).offset().left-5,top: $(".normal").eq(targetindex).offset().top});
//改变背景
that.css({background : "white"});
$(".normal").eq(targetindex).css({background : "white"})
//将其添加到html中
$(document.documentElement).append($copydown);
$(document.documentElement).append($copytarget);
var num = that.text();
$(".info").text("交换中...")
$copydown.animate({left :$(".normal").eq(targetindex).offset().left-5},2000,function(){
that.css({background :"darkcyan"}).text($(".normal").eq(targetindex).text());
$copydown.remove();
$(".info").text("交换完毕");
setTimeout(() => {
$(".info").text("");
}, 1000);
})
$copytarget.animate({left :that.offset().left-5},2000,function(){
$(".normal").eq(targetindex).css({background :"darkcyan"}).text(num);
$copytarget.remove();
//重置
that = null;
mousepos = null;
downindex = null;
targetindex = null;
})
}
})
//鼠标移动要执行的函数
function move(e){
var mopos = {
x : e.pageX -mousepos.x,
y : e.pageY - mousepos.y,
}
$li.css({left : mopos.x ,top: mopos.y});//$li移动
//找出距离最短
var minDis = distance($li, $(".normal").eq(0));
targetindex = 0;
$(".normal").each(function(index){
if(distance($li,$(this)) < minDis) {
minDis = distance($li,$(this));
targetindex = index;
}
});
if(minDis < 10 && Number($li.text())>Number($(".normal").eq(targetindex).text()) ) {
$li.css({"background":"forestgreen","color":"black"});
swapable = true;
$(".info").text("允许交换");
} else {
$li.css({background: "rgba(0,0,0,0.5)", color:"yellow"});
swapable = false;
$(".info").text("");
}
}
//计算距离函数
function distance(obj1,obj2){
return Math.sqrt( Math.pow(obj1.offset().left-obj2.offset().left,2) + Math.pow(obj1.offset().top-obj2.offset().top,2));
}
</script>
</html>