Squares, there are nine picture, wherein dragging with the mouse on a picture placed after the other, and an image release the mouse, Talia exchange position.
** html codes **
`` `HTML: RUN
<! DOCTYPE HTML>
<HTML>
<head>
<Meta charset =" UTF-. 8 ">
<title> Squares - exchange position </ title>
<style type =" text / CSS ">
* {
padding: 0;
margin: 0;
List-style: none;
}
UL {
width: 480px;
height: 480px;
padding: 5px;
background: #CFC;
position: relative;
margin: Auto 100px;
}
Li {
width: by 150px;
margin: 5px;
cursor: move;
-webkit-user-select: none;
background: #FF9;
overflow: hidden;
float: left;
}
img {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<ul>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
<li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=46ac759c68ba5e51fc613502729240cf"></li>
</ul>
</body>
</html>
<script>
/*第一步：准备方法*/
function on(ele, type, fn) {
if (ele.addEventListener) {
ele.addEventListener(type, fn, false);
} else {
if (!ele["onEvent" + type]) {
ele["onEvent" + type] = [];
ele.attachEvent("on" + type, function () {
run.call(ele)
});
}
var a = ele["onEvent" + type];
for (var i = 0; i < a.length; i++) {
if (a[i] == fn)return;
}
a.push(fn);
}
}
function run() {
var e = window.event;
var type = e.type;
e.target = e.srcElement;
e.pageX = (document.documentElement.scrollLeft || document.body.scrollLeft) + e.clientX;
e.pageY = (document.documentElement.scrollTop || document.body.scrollTop) + e.clientY;
e.preventDefault = function () {
e.returnValue = false;
};
e.stopPropagation = function () {
e.cancelBubble = true;
};
var a = this["onEvent" + type];
if (a && a.length) {
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 off(ele, type, fn) {
if (ele.removeEventListener) {
ele.removeEventListener(type, fn, false);
} else {
var a = ele["onEvent" + type];
if (a && a.length) {
for (var i = 0; i < a.length; i++) {
if (a[i] == fn) {
a[i] = null;
return;
}
}
}
}
}
function processThis(fn, context) {
return function (e) {
fn.call(context, e);
};
}
function EventEmitter() {
}
EventEmitter.prototype.on = function (type, fn) {
if (!this["emitter" + type]) {
this["emitter" + type] = [];
}
var a = this["emitter" + type];
for (var i = 0; i < a.length; i++) {
if (a[i] == fn)return this;
}
a.push(fn);
return this;
};
EventEmitter.prototype.run = function (type, e) {
var a = this["emitter" + type];
if (a && a.length) {
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["emitter" + type];
if (a && a.length) {
for (var i = 0; i < a.length; i++) {
IF (A [I] == Fn) {
A [I] = null;
BREAK;
}
}
}
return the this;
};
function the Drag (ELE) {
in this.x = null;
this.y from = null;
this.mx = null;
this.my = null;
this.ele = ELE;
this.obj = ELE;
this.DOWN = processThis (this.down, the this);
this.MOVE = processThis (this.move, the this);
this.UP = processThis (this.up, the this);
on (this.ele, "mouseDown", this.DOWN); // for this on, we just users
//this.on; for this on, we are developers,
}
.__ proto__ = EventEmitter.prototype Drag.prototype;
// this is safer inherited methods, it is generally Node in this way inheritance. IE does not support
Drag.prototype = new EventEmitter; // opposing this way, the upper wording safer
Drag.prototype.down = function (E) {
in this.x = this.ele.offsetLeft;
this.y from the this = .ele.offsetTop;
this.mx = e.pageX;
this.my = e.pageY;
IF (this.ele.setCapture) {
this.ele.setCapture ();
ON (this.ele, "mouseMove", the this. the MOVE);
ON (this.ele, "mouseUp", this.UP);
} the else {
ON (Document, "mouseMove", this.MOVE);
ON (Document, "mouseUp", this.UP);
}
E. preventDefault ();
this.run("abcde1", 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("abcde2", 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("abcde3", e);
};
oRange L = {var: 0, R & lt: 600, T: 0, B: 300};
// corresponds to a method of re-write position calculation drag element, using this method, the original cover Drag.prototype.move off
Drag.prototype.addRange = function (obj) {
this.oRange = obj;
this.on ( "abcde2", this.range);
};
Drag.prototype.range Range = function (E) {
var = oRange the this. oRange;
var L = oRange.l, R & lt oRange.r =, T = oRange.t, B = oRange.b;
var = currentL in this.x + (e.pageX - this.mx);
var = this.y from currentT + (e.pageY - this.my);
IF (currentL> = R & lt) {
this.ele.style.left = R & lt + "PX";
} the else IF (currentL <= L) {
this.ele.style.left + L = "PX";
} the else {
this.ele.style.left = currentL + "px";
}
if (currentT >= b) {
this.ele.style.top = b + "px";
} else if (currentT <= t) {
this.ele.style.top = t + "px";
} else {
this.ele.style.top = currentT + "px";
}
};
Drag.prototype.border = function (width, color, style) {
//允许不传参数，如果参数没有传，则这里给它指定默认的值
if (!width)width = "2";
if (!color)color = "#666";
if (!style)style = "dashed";
this.borderStyle = {width: width, color: color, style: style};
this.on("abcde1", this.addBorder);
this.on ( "abcde3", this.removeBorder);
};
Drag.prototype.addBorder = function () {
var BS = this.borderStyle;
this.ele.style.border = bs.width + "PX" + BS. + Color "" + bs.style;
};
Drag.prototype.removeBorder = function () {
this.ele.style.border = "none";
};
function Linear (T, B, C, D) {
return C * T / D + B;
}
function Animate (ELE, obj, DURATION, Effect, the callback) {
var oBegin = {}; // for holding a plurality of directions the begin;
var oChange = {}; // for holding a plurality of change direction;
var in Flag = 0;// used to record the distance in each direction is valid
for (var attr in obj) {
var target = obj [attr]
animate.getCss the begin = var (ELE, attr);
var target = Change - the begin;
IF (Change) {// this direction of movement is determined at a distance effective, is not 0
oBegin [attr] = the begin;
oChange [attr] = Change;
in Flag ++;
}
}
IF return (in Flag!); // if the movement distance of each direction is 0, the end of the animation execution
var interval the = 15;
var Times = 0;
the clearInterval (ele.timer);
function STEP ( ) {
Times interval The + =;
IF (Times <DURATION) {
for (var attr in oChange) {
var = Change oChange [attr];
var = oBegin the begin [attr];
//var val=times/duration*change+begin;
var val = Linear(times, begin, change, duration);
animate.setCss(ele, attr, val);
}
} else {
for (var attr in oChange) {
var target = obj[attr];
animate.setCss(ele, attr, target);
}
clearInterval(ele.timer);
ele.timer = null;
if (typeof callback == "function") {
callback.call(ele);
}
}
}
ele.timer = setInterval(step, interval);
}
Animate.getCss = function (ELE, attr) {
IF (window.getComputedStyle) {
return parseFloat (window.getComputedStyle (ELE, null) [attr]);
} {the else
IF (attr == "Opacity") {
var Val ele.currentStyle.filter =;
// "Alpha (Opacity = 50)"; // matching to such a string, then the part of the numeric string to get
var reg = / alpha \ (opacity = (\ D + (:?. \ \ D +)) \) /;?
IF (reg.test (Val)) {
return the RegExp $. 1/100;.
} the else {
// if not assigned to the opacity of the IE, the upper side positive was false
return 1; // If no opacity assignment, you should return to the default value of 1
}
// method does not return value, this method performs a left undefined the end. That is: no return value of the method returns undefined
} the else {
return parseFloat (ele.currentStyle [attr]);
}
}
};
animate.setCss = function (ELE, attr, Val) {
IF (attr == "Opacity" ) {
ele.style.opacity = Val;
ele.style.filter = "Alpha (Opacity =" Val * 100 + + ")";
} the else {
ele.style [attr] + = Val "PX";
}
};
/ * Step two: collision detection * /
var Olis = document.getElementsByTagName ( "li");
// the following code, you can do the loop backwards, this is why? We must be clear
for (var i = oLis.length - 1 ; i> = 0;
oLi.style.left = (oLi.l = oLi.offsetLeft) + "px";
oLi.style.top = (oLi.t = oLi.offsetTop) + "px";
oLi.style.position = "absolute";
oLi.style.margin = 0;
new Drag(oLi).on("abcde1", increaseIndex).on("abcde3", changePosition).on("abcde2", test);
}
var index = 0;
function increaseIndex() {
this.ele.style.zIndex = ++index;
}
function goHome() {
animate(this.ele, {left: this.ele.l, top: this.ele.t}, 700);
}
//如果两个元素撞上了，则返回true；没有撞上，则返回false
function isHited(b, r) {
if (b.offsetLeft + b.offsetWidth < r.offsetLeft || b.offsetTop
+ b.offsetHeight < r.offsetTop || b.offsetLeft > r.offsetLeft
+ r.offsetWidth || b.offsetTop > r.offsetTop + r.offsetHeight)
{
return false;
} else {
return true;
}
}
function test() {
this.aHited = [];
for (var i = 0; i < oLis.length; i++) {
var oLi = oLis.item(i);
if (oLi == this.ele)continue;
if (isHited(this.ele, oLi)) {
this.aHited.push(oLi);
oLi.style.backgroundColor = "red";
} else {
oLi.style.backgroundColor = "";
}
}
}
Function changePosition () {
var A = this.aHited;
IF (A && a.length) {
for (var I = 0; I <a.length; I ++) {
var Oli = A [I];
// calculating a distance between the elements and dragged hit element, and the distance to the distance stored attribute
oLi.distance = the Math.sqrt (Math.pow (this.ele.offsetLeft - oLi.offsetLeft, 2)
+ the Math .pow (this.ele.offsetTop - oLi.offsetTop, 2));
oLi.style.backgroundColor = "";
}
// sort, and identify the shortest element is dragged element
a.sort (function (a, B) {
return a.distance - b.distance
});
A Shortest = var [0];
shortest.style.backgroundColor = "Orange";
this.ele.style.backgroundColor = "Orange";
// exchange position
animate (shortest, {left: this.ele.l , top: this } .ele.t, 700);
Animate (this.ele, {left: shortest.l, Top: shortest.t}, 700);
var L = this.ele.l, T = this.ele.t;
the this = shortest.l .ele.l;
this.ele.t = shortest.t;
shortest.l = L;
shortest.t = T;
} hit the else {// If no element returns to the original position of the
animate (this .ele, {left: this.ele.l, Top: this.ele.t}, 700);
}
}
</ Script>
`` `
92JavaScript: Native exchange position
Guess you like
Origin www.cnblogs.com/gushixianqiancheng/p/10967164.html
Ranking