DragDrop.js
/**
* Created by wwtliu on 16/6/28.
*/
(function(){
var disX = 0;
var disY = 0;
var minZindex = 1;
var aPos = [];
function setDrag(obj,aLi) {
obj.onmouseover = function () {
obj.style.cursor = "move";
};
obj.onmousedown = function (event) {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
obj.style.zIndex = minZindex++;
//当鼠标按下时计算鼠标与拖拽对象的距离
disX = event.clientX + scrollLeft - obj.offsetLeft;
disY = event.clientY + scrollTop - obj.offsetTop;
document.onmousemove = function (event) {
//当鼠标拖动时计算div的位置
var l = event.clientX - disX + scrollLeft;
var t = event.clientY - disY + scrollTop;
obj.style.left = l + "px";
obj.style.top = t + "px";
/*for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
if(colTest(obj,aLi[i])){
aLi[i].className = "active";
}
}*/
for (var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
var oNear = findMin(obj,aLi);
if (oNear) {
oNear.className = "active";
}
}
document.onmouseup = function () {
document.onmousemove = null;//当鼠标弹起时移出移动事件
document.onmouseup = null;//移出up事件,清空内存
//检测是否普碰上,在交换位置
var oNear = findMin(obj,aLi);
if (oNear) {
oNear.className = "";
oNear.style.zIndex = minZindex++;
obj.style.zIndex = minZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index]);
//交换index
oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;
} else {
startMove(obj, aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false;//低版本出现禁止符号
}
}
//勾股定理求距离
function getDis(obj1, obj2) {
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
}
//找到距离最近的
function findMin(obj,aLi) {
var minDis = 99;
var minIndex = -1;
for (var i = 0; i < aLi.length; i++) {
if (obj == aLi[i]) {
continue;
}
if (colTest(obj, aLi[i])) {
var dis = getDis(obj, aLi[i]);
if (dis < minDis) {
minDis = dis;
minIndex = i;
}
}
}
if (minIndex == -1) {
return null;
} else {
return aLi[minIndex];
}
}
//碰撞检测
function colTest(obj1, obj2) {
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth + obj1.offsetLeft;
var b1 = obj1.offsetHeight + obj1.offsetTop;
var l1 = obj1.offsetLeft;
var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth + obj2.offsetLeft;
var b2 = obj2.offsetHeight + obj2.offsetTop;
var l2 = obj2.offsetLeft;
if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {
return false;
} else {
return true;
}
};
function getStyle(obj, attr) {//解决JS兼容问题获取正确的属性值
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function startMove(obj, json, fun) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var isStop = true;
for (var attr in json) {
var iCur = 0;
//判断运动的是不是透明度值
if (attr == "opacity") {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
}
var ispeed = (json[attr] - iCur) / 8;
//运动速度如果大于0则向下取整,如果小于0想上取整;
ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
//判断所有运动是否全部完成
if (iCur != json[attr]) {
isStop = false;
}
//运动开始
if (attr == "opacity") {
obj.style.filter = "alpha:(opacity:" + (json[attr] + ispeed) + ")";
obj.style.opacity = (json[attr] + ispeed) / 100;
} else {
obj.style[attr] = iCur + ispeed + "px";
}
}
//判断是否全部完成
if (isStop) {
clearInterval(obj.timer);
if (fun) {
fun();
}
}
}, 30);
}
window.setDrag = setDrag;
window.aPos =aPos;
})();
03通过插件拖放交换图片.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
img{
display: block;
}
.list{
width: 720px;
margin: 100px auto;
background: pink;
overflow: hidden;
}
.list li{
float: left;
}
</style>
<body>
<ul class="list" id="list">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</body>
<script src="DragDrop.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.获取所有的li列表
var list = document.getElementById('list').getElementsByTagName('li');
//2.遍历li添加left top
for(var i = 0; i<list.length;i++){
//3.获取li当前的left top位置值
var left = list[i].offsetLeft;
var top1 = list[i].offsetTop;
//4.记录下当前元素的left top值 存储到aPos数组中
aPos[i] = {left:left,top:top1};
//5.给当前的元素添加自定义的索引值
list[i].index = i;
//6.设置当前元素的left top为它当前的位置,防止突然定位之后跑到左上角
list[i].style.left = left + 'px';
list[i].style.top = top1 + 'px';
console.log(top1);
}
setTimeout(function(){
//延迟执行一会儿。
for(i=0; i<list.length;i++){
//给所有的li添加定位
list[i].style.position = 'absolute';
//清除默认的外边距防止影响定位
list[i].style.margin = 0;
//执行拖放交换的方法,第一个参数是当前的li元素,第二个参数就是list li列表
setDrag(list[i],list);
}
},500);
/**
* 1.先是获取到li的left top值
* 2. 设置left top为当前位置
* 3. 加了绝对定位 导致获取到的left top值变了
* 可能出现的问题:循环瞬间完成了 。定位也瞬间执行完,可能又重新获取了 left top
* 因此把之前的操作完成之后 ,延时去设置定位
*
*/
</script>
</html>