他の後に配置された画像上でマウスをドラッグし、画像をマウス、タリア交換位置を放出する前記四角は、9枚の画像があります。
** HTMLコード**
： `` `HTML RUN
<！DOCTYPE HTML>
<HTML>
<HEAD>
<METAのcharset =」。UTF-8 ">
<タイトル>スクエア-交換位置</ TITLE>
<スタイルタイプ="テキスト/ CSS「>
* {
パディング：0;
マージン：0;
のlist-style：なし;
}
UL {
幅：480PX;
高さ：480PX;
パディング：5pxの;
背景：#CFC;
位置：相対;
マージン：オート100ピクセル。
}
のLi {
幅：150ピクセルによって、
マージン：5pxの;
カーソル：移動。
-webkit-ユーザー選択：なし;
背景：＃1 FF9。
オーバーフロー：隠されました;
フロート：左;
}
IMG {
幅：100％。
高さ：100％;
国境：なし;
}
</スタイル>
</ 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＆ジャンル=エディタ＆援助= 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>
<スクリプト>
/ *第一步：准备方法* /
上の機能（ELE、タイプ、FN）{
IF（ele.addEventListener）{
ele.addEventListener（タイプ、FN、偽）。
}他{
IF（ELE [ "のonEvent" +型]！）{
ELE [ "のonEvent" +タイプ] = [];
ele.attachEvent（+型、関数（）{ "オン"
run.call（ELE）
}）。
}
= ELE VaRのA [ "のonEvent" +型]。
（[I] == FN）戻った場合。
}
a.push（FN）。
}
}
関数の実行（）{
VAR電子= window.event。
VARタイプ= 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 =関数（）{
e.returnValue = FALSE;
}。
e.stopPropagation =関数（）{
e.cancelBubble = TRUE。
}。
VaRのA =この[ "のonEvent" +型]。
IF（&&のa.length）{
ため（VAR i = 0; iはa.length <; iは++）{
IF（[I] == "機能" typeof演算）{
[I]は.call（本、e）の;
}他{
a.splice（I、1）。
私 - ;
}
}
}
}
関数オフ（ELE、タイプ、FN）{
IF（ele.removeEventListener）{
ele.removeEventListener（タイプ、FN、偽）。
}他{
VARのA = ELE [ "のonEvent" +型]。
IF（&&のa.length）{
ため（VAR i = 0; iはa.length <; iは++）{
IF（[I] == FN）{
[I] = NULL;
返します。
}
}
}
}
}
関数processThis（FN、コンテキスト）{
return関数（E）{
fn.call（文脈、E）。
}。
}
関数持つEventEmitter（）{
}
EventEmitter.prototype.on =関数（タイプ、FN）{
IF（この[ "エミッタ" +型]！）{
この[ "エミッタ" +タイプ] = [];
}
VAR aは=この[ "エミッタ" +型]。
ため（VAR i = 0; iがa.lengthを<; iは++）{
（[I] == FN）、これを返す場合、
}
a.push（FN）。
これを返します。
}。
EventEmitter.prototype.run =関数（タイプE）{
VAR aは=この[ "エミッタ" +型]。
IF（&&のa.length）{
ため（VAR i = 0; iはa.length <; iは++）{
IF（[I] == "機能" typeof演算）{
[I]は.call（本、e）の;
}他{
a.splice（I、1）。
私 - ;
}
}
}
}。
EventEmitter.prototype.off =関数（タイプ、FN）{
VAR aは=この[ "エミッタ" +型]。
（&& a.length）場合、{
（VARのために私は= 0; iが< a.length; I ++）{
IF（[I] == FN）{
[I] = NULL;
BREAK;
}
}
}
これを返す;
};
{ドラッグ（ELE）として機能
this.x = NULLで;
= NULLからthis.y;
this.mx = NULL;
this.my = NULL;
this.ele = ELE;
this.obj = ELE;
this.DOWN = processThis（this.down、この）;
this.MOVE = processThis（this.move、この）;
this.UP = processThis（this.up、これを）;
//このために、私たちだけのユーザー;（this.ele、 "mouseDownイベント"、this.DOWN）に
//this.on;で、このために、私たちは開発者は、
}
.__ proto__ = EventEmitter.prototype Drag.prototype;
//これは、この方法の継承に一般ノードで、より安全な継承されたメソッドです。IEがサポートされていない
このように、上部文言安全対向//; Drag.prototype =新しい持つEventEmitterを
Drag.prototype.down =関数（E）を{
this.x = this.ele.offsetLeftに、
このからthis.y = .ele.offsetTop;
this.mx = e.pageX;
this.my = e.pageY;
IF（this.ele.setCapture）{
this.ele.setCapture（）;
ON（this.ele、 "mouseMoveイベント"、この。 MOVE）;
ON（this.ele、 "のmouseUp"、this.UP）;
}そうでなければ{
（文献、 "mouseMoveイベント"、this.MOVE）ON、
ON（文献、 "のmouseUp"、this.UP）;
}
E.でpreventDefault（）;
this.run（ "abcde1"、E）。
}。
Drag.prototype.move =関数（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 =関数（E）{
IF（this.ele.releaseCapture）{
this.ele.releaseCapture（）。
オフ（this.ele、 "のMouseMove"、this.MOVE）。
オフ（this.ele、 "のmouseup"、this.UP）。
}他{
オフ（文書"のMouseMove"、this.MOVE）。
オフ（文書、 "のmouseup"、this.UP）。
}
これ。（ "abcde3"、e）を実行します。
}。
オレンジL = {VAR：0、R＆LT：600、T：0、B：300;}
//この方法を使用して、再書き込み位置算出ドラッグエレメントの方法に対応する、原稿カバーDrag.prototype.moveオフ
Drag.prototype.addRange =関数（OBJ）{
; this.oRange = OBJ
this.on（ "abcde2"、this.range）;
};
Drag.prototype.range範囲=関数（E）{
VARこの=オレンジ。オレンジ;
VAR L = oRange.l、R＆LT oRange.r =、T = oRange.t、B = oRange.b;
this.x +でVAR = currentL（e.pageX - this.mx）;
currentTからVAR = this.y +（e.pageY - this.my）;
IF（currentL> = R＆LT）{
this.ele.style.left = R＆LT + "PX";
}そうIF（currentL <= L）{
this.ele.style.left + L = "PX";
}他{
this.ele.style.left = currentL + "PX"。
}
IF（currentT> = B）{
this.ele.style.top = B + "PX"。
}そうであれば（currentT <= T）{
this.ele.style.top = T + "PX"。
}他{
this.ele.style.top = currentT + "PX"。
}
}。
Drag.prototype.border =関数（幅、色、スタイル）{
//允许不传参数、如果参数没有传、则这里给它指定默认的值
幅= "2"であれば（幅！）。
（！色）色= "＃666"であれば、
（！スタイル）であれば、スタイル=「破線」。
this.borderStyle = {幅：幅、色：色、スタイル：スタイル}。
this.on（ "abcde1"、これ。
this.on（ "abcde3"、this.removeBorder）;
};
Drag.prototype.addBorder =関数（）{
VAR BS = this.borderStyle;
this.ele.style.border = bs.width + "PX" + BS。 +カラー"" + bs.style;
};
Drag.prototype.removeBorder =関数（）{
this.ele.style.border = "NONE";
};
機能リニア（T、B、C、D）{
戻りC * T / D + B;
}
関数アニメーション（ELE、OBJ、DURATION、効果、コールバック）{
VAR oBegin = {}; //開始複数の方向を保持するため、
VAR oChange = {}; //複数を保持します方向を変え、
フラグ= 0でVAR。//各方向の距離が有効で記録するために使用される
（OBJ内のvar ATTR）{ための
VAR対象= OBJ [ATTR]
animate.getCss = VAR（ELE、ATTR）開始;
VAR目標=変更-始める;
{//動きのこの方向は、有効距離で決定された場合（変化する）、0ない
oBegin [ATTR]始める=;
oChange [ATTR] =変更、
フラグに++;
}
}
戻った場合（フラグに！）; //各方向の移動距離は0、アニメーション実行の終わりである場合
VAR間隔= 15;
VAR時間= 0;
てclearInterval（ele.timer）;
機能ステップ（ ）{
タイムインターバルザ+ =;
IF（タイムズ<DURATION）{
oChangeで（VARのATTR用）{
VAR =変更oChange [ATTR];
VAR = oBegin [ATTR]始めます。
//するvarヴァル=時間/期間*変更+始めます。
VaRのヴァル=リニア（時間、開始、変更、デュレーション）;
animate.setCss（ELE、ATTR、ヴァル）。
}
}そうでなければ{
（oChangeにおけるVARのATTR）{ための
VAR対象= OBJ [ATTR]。
animate.setCss（ELE、ATTR、ターゲット）
}
てclearInterval（ele.timer）。
ele.timer = NULL;
IF（typeof演算コールバック== "機能"）{
callback.call（ELE）。
}
}
}
ele.timer =たsetInterval（ステップ間隔）。
}
Animate.getCss =関数（ELE、ATTR）{
IF（window.getComputedStyleが）{
parseFloatは戻り（ヌルwindow.getComputedStyleが（ELEが、）ATTR]）;
} {他
IF（ATTR == "不透明度"）{
VARヴァルele.currentStyle.filter =;
// "アルファ（不透明度= 50）"; //などの文字列に一致し、数値文字列の一部を取得するため
のvar REG = /アルファ\（不透明度 =（\ D +（？：\ \ D +））\）/ ;?
（reg.test（ヴァル）IF）{
正規表現$を返す1/100 ;.。
}他に{
// IE、上側の不透明度に割り当てられていない場合正は偽だった
リターン1; //なし不透明割り当てた場合は、デフォルト値の1に戻す必要があります
}
//メソッドは、このメソッドは終わりを未定義のままを行い、値を返しません。すなわち：メソッドの戻り値は不定返さない
}他{
返すparseFloatは（ele.currentStyle [ATTR]）;
}
}
};
animate.setCss =関数（ELE、ATTR、ヴァル）{
IF（ATTR == "不透明度" ）{
ele.style.opacity =ヴァル;
ele.style.filter = "アルファ（不透明度="ヴァル* 100 + + "）";
}他{
ele.style [ATTR] + =ヴァル"PX";
}
}。
/ *ステップ2：衝突検出* /
VAR Olis = document.getElementsByTagName（「李」）;
//次のコードで、あなたが後方ループを行うことができますが、これはなぜですか？我々は明確でなければならない
（する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 =「絶対」。
oLi.style.margin = 0;
新しいドラッグ（OLI）.on（ "abcde1"、increaseIndex）.on（ "abcde3"、changePosition）.on（ "abcde2"、テスト）;
}
VARインデックス= 0。
機能increaseIndex（）{
this.ele.style.zIndex = ++指数;
}
関数GOHOME（）{
アニメーション（this.ele、{左：this.ele.l、トップ：this.ele.t}、700）。
}
//如果两个元素撞上了、则返回真;没有撞上、则返回偽
関数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）
{
falseを返します。
}他{
trueを返します。
}
}
機能テスト（）{
this.aHited = [];
用（VAR i = 0; I <oLis.length; I ++）{
VAR OLI = oLis.item（I）。
継続（OLI == this.ele）であれば、
IF（isHited（this.ele、OLI））{
this.aHited.push（OLI）。
oLi.style.backgroundColor =「赤」。
}他{
oLi.style.backgroundColor = "";
}
}
}
関数changePosition（）{
VARのA = this.aHited;
IF（&& a.length）{
{（; Iはa.lengthを<I ++はVAR I = 0）のための
VARオリ= A [I];
//要素およびヒット要素をドラッグ、及び距離格納された属性への距離との間の距離算出
oLi.offsetLeft、2） - oLi.distanceはMath.sqrt（Math.pow（this.ele.offsetLeft =
+数学.pow（this.ele.offsetTop - oLi.offsetTop、2））;
oLi.style.backgroundColor = "";
}
//ソート、特定最短要素がドラッグされた要素
a.sort（関数（、 B）{
戻りa.distance - b.distance
}）。
最短= VAR [0];
shortest.style.backgroundColor = "ORANGE";
this.ele.style.backgroundColor = "ORANGE";
//交換位置
アニメーション（最短、{左：this.ele.l 、トップ：本} .ele.t、700）;
アニメーション（this.ele、{左：shortest.l、トップ：shortest.t}、700）;
VARのL = this.ele.l、T = this.ele.t;
この= shortest.l .ele.l;
this.ele.t = shortest.t;
shortest.l = L;
shortest.t = T;
}そうヒット{//の元の位置にない要素戻る場合
アニメーション（この.ele、{左：this.ele.l、トップ：this.ele.t}、700）;
}
}
</ SCRIPT>
`` `
92JavaScript：ネイティブ交換位置
おすすめ
転載: www.cnblogs.com/gushixianqiancheng/p/10967164.html
おすすめ
ランキング