最近、インターネット上で Google のパーソナライズされたホームページや MSN スペースに似たドラッグ アンド ドロップの実装を探している友人を見かけ、以下の例を見つけました。しかし、多くの問題があったため、書き直して改良し、一般的なものを確立しました。関数の具体的な実装は次のとおりです:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>BlackSoul のドラッグ アンド ドロップ デモ</title> >
<!- -
___________________________________
|----------著者 By BlackSoul-----------
|-----------2006.03.30------ ---- ----|
|[email protected] ------|
|-----------QQ:9136194 ---- ---- ------
|------http://blacksoul.cnblogs.cn---|
============== ==== ===============
-->
<style type="text/css">
body
{
margin:0px
;
#aim /*対象のレイヤースタイルを設定します*/
{
position:absolute;/*レイヤーの位置を制御するために必要なスタイル*/
width:200px
height:30px;
border:1px
plain #666666;
;
}
#sourceLayer, #cloneLayer
{
position:absolute;/*レイヤーの位置を制御するために必要なスタイル*/
width:300px;
height:1px
{101}
background-color:#CCCCCC
;
}
.docked
{
表示: なし;
アルファ(不透明度=100)
}
.actived
{
表示: ブロック
: アルファ(opacity=70)
}
</style>
</head>
<本文>
<div id="aim">配置範囲</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="docked" unselectable="off"> </div>
<script type="text/javascript" language="javascript">
<!--
/*
============================= =======
|----------著者: BlackSoul|
-----------2006.03.30----- --------|
|[email protected] ------|
|-----------QQ:9136194--- -----------|
|------http://blacksoul.cnblogs.cn---|
================= ==================
*/
//レイヤーオブジェクトを設定
し
ます
。
// 各レイヤーの初期位置を定義します
var aimX;
var
orgnY
;
//ドラッグ中の変数
varraging = false; //ドラッグ中かどうか
var
offsetX = 0; //X 方向の左右のオフセット
var offsetY = 0;
back; / /アニメーション オブジェクトを返します
var thisX;
// 現在のクローン
レイヤ
の X 位置var stepX; // 変位速度
;
//ドラッグ情報の初期化
/*
initAimX ターゲット x 座標
initAimY ターゲット y 座標
initOrgnX ドラッグソース x 座標
initOrgnY ドラッグソース y 座標
*/
// レイヤーオブジェクトを取得
関数 getLayer(inAim,inSource,inClone)
{
目的 = document.getElementById(inAim);
sourceLayer
= document.getElementById(inClone);
}
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX =
initAimX;
orgnX = initOrgnX;
orgnY
=
initOrgnY;
// 各開始レイヤーの位置を設定します
= ソース
レイヤー.スタイル.ピクセル左 = orgnX;
クローン
レイヤー.
スタイル.ピクセル
左 = orgnY;
//ドラッグ
関数を準備します BeforeDrag()
{
if (event.button != 1)
{
return;
}
cloneLayer.innerHTML = sourceLayer.innerHTML // ドラッグ元のコンテンツをコピーします
offsetX = document.body.scrollLeft + events.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop +event.clientY - sourceLayer.style.pixelTop
="
アクティブ"
;
//ドラッグ
関数 OnDrag()
{
if
(
!dragging)
{
return;
}
// 位置を更新します
。
= ドキュメント.ボディ.スクロールトップ + イベント.クライアント Y - オフセット Y
}
//ドラッグ終了
関数 EndDrag()
{
if (event.button != 1)
{
return
}
ドラッグ = false;
if (event.clientX >=aim.style.pixelLeft &&event.clientX<=(aim.style.pixelLeft +aim.offsetWidth) &&
event.clientY >=aim.style.pixelTop &&event.clientY <= (aim.style .pixelTop + aim.offsetHeight))
{
//ドラッグ レイヤはターゲット内に配置され、ターゲットの位置に自動的に配置され
ます
。
cloneLayer.className = "docked";
/*
** これを完了すると、xmlを
使用して現在の位置を保存できます。
** 次回ユーザーが入力すると
、ソース ドラッグ レイヤが xml 内のデータに初期化されます
。
else
{
//ドラッグアンドドロップ ターゲットレイヤーの外側に位置し、ドラッグ元の位置を復元します
thisX
= cloneLayer.style.pixelTop
;
offSetX = Math.abs(thisX - orgnX);
(thisY - orgnY);
time = 500;//アニメーション時間を設定します
stepX = Math.floor((offSetX/time)*20);
stepY
= Math.floor((offSetY/time)*20);
0)
ステップ X = 2;
if (ステップ Y == 0)
ステップ Y = 2;
//リターンアニメーションを開始します
moveStart()
}
}
function moveStart()
{
back = setInterval("MoveLayer();",15);
}
//返されたアニメーション効果
関数を設定します MoveLayer()
{
//ターゲットの左上に配置されます
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style .pixelTop += stepY;
// 変位がターゲットを超える場合、速度を pix に設定し、反対方向に戻ります。 if
(cloneLayer.style. xelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1;
}
//X 軸または Y 軸の座標が同じ場合、変位は発生しません
if(cloneLayer.style .pixelLeft == orgnX)
{
stepX = 0;
}
if(cloneLayer .style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
エンドムーブ()
}
}
// ターゲットの左下に配置されます
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft += stepX;
cloneLayer.style.pixelTop -= stepY;
if(cloneLayer.style.pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop<
orgnY)
{
stepY = 1;
}
if
(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0;
(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
// ターゲットの右上に配置されます
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop += stepY; ;
if(cloneLayer.style.pixelLeft < orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop>
orgnY)
{
stepY = 1;
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0;
if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
// ターゲットの右上に配置されます
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop -= stepY; ;
if(cloneLayer.style.pixelLeft < orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop < orgnY)
{
stepY = 1;
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0
;
if(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
// ターゲットに到達します
else
{
EndMove()
}
}
// アニメーション
関数を終了します EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelLeft =
orgnX
;
cloneLayer.className = "docked";
クリアインターバル(戻る
);
//メインのドラッグ関数
function startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer
(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag;
onmousemove = OnDrag; //ここで cloneLayer を使用すると、ドラッグ中に cloneLayer 内のコンテンツが選択されてしまい、いくつかのバグが発生します...
cloneLayer.onmouseup = EndDrag;
}
//Call
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
以下の点に注意してください。
1. HTML には div の定義が 3 つ必要であり、位置を制御するには 3 つのレイヤーすべてでスタイルの位置を絶対として定義する必要があります。
1. ターゲット レイヤー (目的)。その主な機能は、ドラッグが有効になる位置を定義することです。
2. ソース (sourceLayer) をドラッグします。属性 unselectable = "off" に設定することに注意してください (これは奇妙です。オン範囲に設定すると、ドラッグ プロセス中にレイヤー コンテンツが選択されます)。
3. コピーに使用されるレイヤー (cloneLayer)。
2. 関数呼び出し
startDraging パラメータの説明:
initAim ターゲットレイヤー名 initSource ドラッグソース名 initClone コピーに使用したレイヤーの名前
initAimX ターゲット レイヤの x 軸座標 initAimY ターゲット レイヤの y 軸座標 initOrgnX ドラッグ ソースの x 座標 initOrgnY ドラッグ ソースの Y 軸座標は
IE でのみテストされています。ドラッグソースがターゲットに到達した後に XML を記述する操作を追加できます。そして、アニメーションを返すアルゴリズムにあまり満足していません。私は現在、asp.net2.0 に基づいた一連の ajax コントロールの開発に取り組んでいます。ps
: 私のブログ ガーデンの最初の記事をよろしくお願いします。 。