js实现拖动交换位置排列效果代码
代码语言：html
所属分类：拖放
代码描述：js实现拖动交换位置排列效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript实现图片拖拽交换DEMO演示</title>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul {
padding: 5px;
width: 480px;
height: 640px;
margin: 100px auto;
position: relative;
background: #3366cc;
}
li {
width: 150px;
height: 150px;
margin: 5px;
float: left;
overflow: hidden;
background: #ff6600;
cursor: move;
-webkit-user-select: none;
}
li img {
width: 150px;
height: 150px;
display: block;
border: none;
}
</style>
</head>
<body>
<ul>
<li><img src="//repo.bfw.wiki/bfwrepo/image/6065030ccad6e.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/image/606502f17d4a4.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83e01e7154e.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83e03407e19.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83de11eb571.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83debf255e9.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/image/606502f17d4a4.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83e01e7154e.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83e03407e19.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83de11eb571.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/icon/5e83debf255e9.png"></li>
<li><img src="//repo.bfw.wiki/bfwrepo/image/606502f17d4a4.png"></li>
</ul>
<script>
function on(ele, type, fn) {
if (/^self/.test(type)) {
if (!ele[type]) {
ele[type] = [];
}
var a = ele[type];
for (var i = 0; i < a.length; i++) {
if (a[i] == fn)return;
}
a.push(fn);
}
if (ele.addEventListener) {
ele.addEventListener(type, fn, false);
return;
}
if (!ele["aEvent"+type]) {
ele["aEvent"+type] = [];
ele.attachEvent("on"+type, function(e) {
run.call(ele, e)});
}
var a = ele["aEvent"+type];
for (var i = 0; i < a.length; i++) {
if (a[i] == fn)return;
ele.attachEvent("on"+type, function(e) {
run.call(ele, e)});
}
a.push(fn);
ele.attachEvent("on"+type, function(e) {
run.call(ele, e)});
}
function run() {
var e = window.event;
if (!e.target) {
e.target = e.srcElement;
e.stopPropagation = function() {
e.cancelBubble = true
};
e.preventDefault = function() {
e.returnValue = false
};
e.pageX = (document.documentElement.scrollLeft || document.body.scrollLeft)+e.clientX;
e.pageY = (document.documentElement.scrollTop || document.body.scrollTop)+e.clientY;
}
var a = this["aEvent"+e.type];
for (var i = 0; i < a.length; i++) {
if (typeof a[i] == "function") {
a[i].call(this, e);
} else {
a.splice(i, 1);
i--;
}
}
}
function selfRun(selfType, e) {
var a = this[selfType];
if (a) {
for (var i = 0; i < a.length; i++) {
if (typeof a[i] == "function") {
a[i].call(this, e);
}
}
}
}
function off(ele, type, fn) {
if (/^self/.test(type)) {
var a = ele[type];
if (a) {
for (var i = 0; i < a.length; i++) {
if (a[i] == fn) {
a[i] = null;
break;
}
}
}
}
if (ele.removeEventListener) {
ele.removeEventListener(type, fn, false);
return;
}
var ary = ele["aEvent"+type];
if (ary) {
for (var i = 0; i < ary.length; i++) {
if (ary[i] === fn) {
ary[i] = null;
return;
}
}
}
}
function processThis(obj, fn) {
return function(e) {
fn.call(obj, e)}
}
</script>
<script>
function EventEmitter() {};
EventEmitter.prototype.on = function(type, fn) {
if (!this[type]) {
this[type] = [];
}
var a = this[type];
for (var i = 0; i < a.length; i++) {
if (a[i] == fn)return;
}
a.push(fn);
};
EventEmitter.prototype.run = function(type, e) {
var a = this[type];
if (a) {
for (var i = 0; i < a.length; i++) {
if (typeof a[i] == "function") {
a[i].call(this, e);
} else {
a.splice(i, 1);
i--;
}
}
}
};
EventEmitter.prototype.off = function(type, fn) {
var a = this[type];
if (a) {
for (var i = 0; i < a.length; i++) {
if (a[i] == fn) {
a[i] = null;
break;
}
}
}
};
function Drag(ele) {
this.ele = ele;
this.x = null;
this.y = null;
this.mx = null;
this.my = null;
this.DOWN = processThis(this, this.down);
this.MOVE = processThis(this, this.move);
this.UP = processThis(this, this.up);
on(ele, "mousedown", this.DOWN);
}
Drag.prototype = new EventEmitter;
Drag.prototype.down = function(e) {
this.x = this.ele.offsetLeft;
this.y = this.ele.offsetTop;
this.mx = e.pageX;
this.my = e.pageY;
if (this.ele.setCapture) {
this.ele.setCapture();
on(this.ele, "mousemove", this.MOVE);
on(this.ele, "mouseup", this.UP);
} else {
on(document, "mousemove", this.MOVE);
on(document, "mouseup", this.UP);
}
e.preventDefault();
this.run("dragstart", e);
};
Drag.prototype.move = function(e) {
this.ele.style.left = this.x+(e.pageX-this.mx)+"px";
this.ele.style.top = this.y+(e.pageY-this.my)+"px";
this.run("drag", e);
};
Drag.prototype.up = function(e) {
if (this.ele.releaseCapture) {
this.ele.releaseCapture();
off(this.ele, "mousemove", this.MOVE);
off(this.ele, "mouseup", this.UP);
} else {
off(document, "mousemove", this.MOVE);
off(document, "mouseup", this.UP);
}
this.run("dragend", e);
};
Drag.prototype.addBorder = function() {
this.ele.style.border = "2px red dashed";
};
Drag.prototype.removeBorder = function() {
this.ele.style.border = "";
};
Drag.prototype.border = function() {
this.on("dragstart", this.addBorder);
this.on("dragend", this.removeBorder);
};
</script>
<script src="js/tween.js"></script>
<script>
var oLis = document.getElementsByTagName("li");
//第一步：把浮动布局改造成绝对定位布局，否则无法拖拽
for (var i = oLis.length - 1; i >= 0; i--) {
var oLi = oLis.item(i);
oLi.style.top = (oLi.t = oLi.offsetTop) + "px";
oLi.style.left = (oLi.l = oLi.offsetLeft) + "px";
oLi.style.position = "absolute"; //定位要后做
oLi.style.margin = 0;
var obj = new Drag(oLi);
obj.border();
obj.on("dragstart", increaseIndex);
obj.on("dragend", goHome);
obj.on("drag", getHited);
obj.on("dragend", changePosition);
}
//点谁谁到前面
var index = 0;
function increaseIndex() {
this.ele.style.zIndex = ++index;
}
//回到原位
function goHome() {
animate(this.ele, {
left: this.ele.l, top: this.ele.t
}, 400, 2);
}
//碰撞变色
function getHited() {
var ele = this.ele;
this.aHited = [];
for (var i = 0; i < oLis.length; i++) {
var oLi = oLis.item(i);
if (ele == oLi)continue;
oLi.style.background = "";
if (test(ele, oLi)) {
oLi.style.background = "#ff6600";
this.aHited.push(oLi); //把装上的保存到数组里
}
}
}
function test(r, b) {
if (r.offsetLeft + r.offsetWidth < b.offsetLeft || r.offsetTop + r.offsetHeight < b.offsetTop || r.offsetLeft > b.offsetLeft + b.offsetWidth || r.offsetTop > b.offsetTop + b.offsetHeight) {
return false; //以上没有相撞
} else {
return true;
}
}
//图片交换位置
function changePosition() {
var a = this.aHited;
if (a) {
for (var i = 0; i < a.length; i++) {
var oLi = a[i];
var ele = this.ele;
oLi.distance = Math.pow(oLi.offsetLeft-ele.offsetLeft, 2)+Math.pow(oLi.offsetTop-ele.offsetTop, 2);
}
a.sort(function(a, b) {
return a.distance- b.distance;
});
a[0].style.background = "#000000";
oLi = a[0];
animate(oLi, {
left: ele.l, top: ele.t
}, 400, 4);
animate(ele, {
left: oLi.l, top: oLi.t
}, 400, 3);
var templ = ele.l;
var tempt = ele.t;
ele.l = oLi.l;
ele.t = oLi.t;
oLi.l = templ;
oLi.t = tempt;
}
}
/*
参数说明：
参数1、ele:表示做动画效果的那个元素
参数2、obj：是一个JSON对象，表示在ele元素在那几个方向运动。格式如下
obj={height:600,width:600,top:433,left:399,opacity:0.1}
参数3：nDuration，表示完成动画所需要的总时间。
参数3、effectType:可选参数，表示四种运动效果中的一个，分别为
第一种情况
：1表示匀速运动
：2表示缓冲运动
：3是弹性运动
: 4表示反弹运动
第二种情况：
可以传一个函数，表示是回调方法
第三种情况：
什么也不传，则以匀速方式做运动。
第四种情况，传一个数组，类似['Back','easeIn']，表示某种定义好的算法
参数4、fnCallback:可选参数。表示是回调方法
*/
//0表示减速 1表示加速 2表示elastic弹性的 3表示back返回式 4表示bounce反弹
//再用0减速效果为默认效果
//以下是动画的算法
var zhufengEffect = {
//当前时间*变化量/持续时间+初始值
zfLinear: function(t, b, c, d) {
return c*t/d + b;
},
Quad: {
//二次方的缓动（t^2）；
easeIn: function(t, b, c, d) {
return c*(t /= d)*t + b;
},
easeOut: function(t, b, c, d) {
return -c *(t /= d)*(t-2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
},
Cubic: {
//三次方的缓动（t^3）
easeIn: function(t, b, c, d) {
return c*(t /= d)*t*t + b;
},
easeOut: function(t, b, c, d) {
return c*((t = t/d-1)*t*t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d/2) < 1) return c/2*t*t*t + b;
return c/2*((t -= 2)*t*t + 2) + b;
}
},
Quart: {
//四次方的缓动（t^4）；
easeIn: function(t, b, c, d) {
return c*(t /= d)*t*t*t + b;
},
easeOut: function(t, b, c, d) {
return -c * ((t = t/d-1)*t*t*t - 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t -= 2)*t*t*t - 2) + b;
}
},
Quint: {
//5次方的缓动（t^5）；
easeIn: function(t, b, c, d) {
return c*(t /= d)*t*t*t*t + b;
},
easeOut: function(t, b, c, d) {
return c*((t = t/d-1)*t*t*t*t + 1) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /= d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t -= 2)*t*t*t*t +.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0