<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style>
ul,li{list-style: none;}
.clearfix:after{content:"";height: 0; display: block; clear: both; visibility: hidden;}
.clearfix{zoom:1;}
#box-1,#box-2{ position: relative; width: 100%;}
#b1 li{float: left;width:30px;height:30px;background: #ccc;margin:5px;cursor: pointer;}
#b2 li{float: left;width:30px;height:30px;background: green;margin:5px;cursor: pointer;}
</style>
</head>
<body>
<div id="b1" class="clearfix">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="b2" class="clearfix">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var box1 = document.getElementById(‘b1‘);
var box2 = document.getElementById(‘b2‘);
var blist1 = box1.getElementsByTagName(‘li‘);
var blist2 = box2.getElementsByTagName(‘li‘);
for (var i = 0; i < blist1.length; i++) {
Drag(blist1[i]);
}
function Drag(obj) {
var index;
obj.onmousedown = function(ev) {
ev = ev || window.event;
obj.style.opacity = "0.8";
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
var This=this;
document.onmousemove = function(ev) {
ev = ev || window.event;
obj.style.position = "absolute";
obj.style.backgroundColor = "red";
obj.style.left = ev.clientX - disX + "px";
obj.style.top = ev.clientY - disY + "px";
var lines=getLines();
//console.log(lines);
lines.remove(index);
var minIndex=lines.getMinIndex();
//console.log(minIndex);
blist2.push(blist1[index]);
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
obj.style.position="relative";
obj.style.opacity = "1";
}
}
//获取两个元素之间的距离 返回数组l
function getLines() {
var arr=[];
for (var i = 0; i < blist1.length; i++) {
//var c = lineDis(blist1[i], obj);
//arr.push(Math.floor(c));
if(blist1[i]==obj){
index=i;
}
}
for (var j = 0; j < blist2.length; j++) {
var d = lineDis(blist2[j], obj);
arr.push(Math.floor(d));
}
return arr;
}
}
/**
* 方法:lineDis(obj1,obj2)
* 功能:以对象的左上角为准，两个对象的距离
* 参数:需要求距离的两个对象
* 返回:两个对象之间的距离值
*/
function lineDis(obj1,obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(a * a + b * b);
}
/**
* 方法:Array.remove(index)
* 功能:删除数组元素
* 参数:index删除元素的下标
* 返回:在原数组上修改数组
*/
Array.prototype.remove=function(index)
{
if(isNaN(index)||index>this.length){return false;}
for(var i=0,n=0;i<this.length;i++)
{
if(this[i]!=this[index])
{
this[n++]=this[i];
}
}
this.length-=1;
}
/**
* 方法:Array.indexOf(val)
* 功能:获取元素的下标
* 参数:需要返回下标的数组元素
* 返回:该元素的下标
*/
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
/**
* 方法:Array.getMin()
* 功能:获取数组的最小值的下标
* 参数:
* 返回:数组的最小值的下标
*/
Array.prototype.getMinIndex = function() {
var min = this[0];
var len = this.length;
for (var i = 1; i < len; i++) {
if (this[i] < min) {
min = this[i];
var num =i;
}
}
return num;
};
</script>
</body>
</html>