JavaScript を使用してドラッグレイアウトを作成するためのアイデア_JavaScript スキル

なぜ！もしくはjsのスキルが低すぎる。情報を探しながら書いたので、あまり印象に残っていない部分も多いです
時間が経つとまた書くのが難しくなりそうなので、その時の感想を記録しておきます！エビさんからもアドバイスをいただければと思います！
それでは、本文に移り、始める前にいくつかの機能を紹介しましょう。
1. イベント関数のフォーマット

コードをコピーします コードは次のとおりです:

function getEvent(){
//IE と FF の両方の書き込みメソッドと互換性があります
if(document.all) return window.event;
func=getEvent.caller; (func !=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="オブジェクト" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
func=func.caller; >}
return null;
}




2. マウスの位置を取得します

コードをコピー コードは次のとおりです: function MouseCoords(ev){

if(ev.pageX || ev.pageY){

return {x: ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY document.body.scrollTop - document.body.clientTop
}




3. >

コードをコピー

コードは次のとおりです: function getPosition(ele){ var left = 0; while (ele.offsetParent){

top = ele.offsetTop; ;

}
left = ele.offsetLeft;
return {x:left, y:top};
まず最初に、初期レイアウト ページを作成し、初期ページの効果を確認します。
通常、ドラッグされた要素はマウスに従います。私のアイデアは、ドラッグされた要素を絶対位置の div に追加することです。 🎜> マウスをドラッグすると移動します。マウスの座標に応じて位置を変更できます。そこで、onload を追加しました




コードをコピー


コードは次のとおりです:

var tmpDiv=null ; // ドラッグしたオブジェクトの div を一時的に保存します
window.onload=function(){
tmpDiv=document.createElement("div");
tmpDiv.style.cssText = 'position:absolute; display: none;border:1px dotted #FFCC66;';
document.body.appendChild(tmpDiv);

ドラッグを実装するには、次のイベントがトリガーされます。 MouseDown なので、 onmousedown="mouseDown(this);" をドラッグされたテーブルの TD にバインドしました。

コードをコピーします。


varragObject = null;//ドラッグされた要素 (テーブル)
var MouseOffset = null;//ドラッグされた要素内のマウスの位置
varragDiv =null;//ドラッグされたテーブルが配置されている列の div
var eleDivW=null;//ドラッグされたテーブルの親ノード (div) の高さ
varragDivLen=null;//ドラッグされたテーブル 列の div にテーブルを配置するために使用される div の数
var DragContainer=["col1", "col2", "col3"];//列レイアウトの実装に使用される div の ID

/ /マウスを押して要素をドラッグします
function MouseDown(elem){
ev=getEvent();

dragObject = elem.parentNode.parentNode.parentNode;//ドラッグされたテーブル dragDiv =dragObject. parentNode.parentNode; //ドラッグ要素が配置されている列の div の数dragDivLen=dragDiv.getElementsByTagName("div").length mouseOffset = getMouseOffset(dragObject, ev); eleDivW=dragObject.parentNode.offsetWidth; dragObject.parentNode.style.border="1px dotted #FFCC66";

return false

}
// マウスのドラッグ要素の位置を取得します。
関数 getMouseOffset(target, ev){
var docPos = getPosition(target);
var MousePos = MouseCoords(ev);
return {x:mousePos.x - docPos.x , y :mousePos.y - docPos.y};
}


もちろん、ドラッグしているオブジェクトもマウスを動かすことで移動できます。簡単にするために、ドキュメントをバインドします。




コードをコピーします


コードは次のとおりです。

document.onmousemove = MouseMove;
function MouseMove(){
ev=getEvent();
if(dragObject); >dragObject.parentNode.style.display="none";//ドラッグされたテーブルが配置される div を非表示に設定します
//ドラッグされたテーブルを一時 div に配置し、その座標を設定します
for( var i =0; itmpDiv.style.width =eleDivW "px";
tmpDiv.style.backgroundColor="#FFFFFF";
tmpDiv.style.display="block";
tmpDiv.style.top = (mousePos.y - MouseOffset.y) px";
tmpDiv.style.left = (mousePos.x - MouseOffset.x) "px";
}
return false;
}



mousemoveでは当然mouseupが必須です

コードをコピー コードは次のとおりです: document.onmouseup = MouseUp;

//マウス

関数 MouseUp(){
if(dragObject){
if(dragObject.parentNode.style.display=="none") ドラッグオブジェクトを解放します。 parentNode.style .display="block";
dragObject.parentNode.style.border="1px Solid #FFCC66";
tmpDiv.style.display="none";列に何かがある場合要素をドラッグするとき、以前に設定した高さの値 20px をクリアします。
for(var m=0;mvarcolDiv=document.getElementById(DragContainer[m] ]);
varcolDivLen=colDiv.getElementsByTagName("div").length
varcolSty=colDiv.getAttribute("style");
if(colDivLen>&&colSty!=null){
ColDiv.removeAttribute(" style");
break;
}
}



を参照ドラッグできる場合は、マウスの左ボタンを放すと、ドラッグされた要素が元の位置に戻ります。

最後に、ドラッグされた要素が元の位置に戻らないようにします。元の位置に戻ります。
以下は、mousemove イベントのすべてのコードです。理解するにはコメントを参照してください。

コードをコピーします


コードは次のとおりです:

function MouseMove(){
ev=getEvent();
var MousePos = MouseCoords(ev);
if(dragObject){
//ドラッグ可能なオブジェクトの数は 1 で、ドラッグ後にこの列にドラッグ要素がないことを示します。高さがないためにこの列が表示されないようにするには、その高さを 20px に設定します。
if(dragDivLen==1)ragDiv.style .height="20px";
dragObject.parentNode.style.display="none";
//ドラッグされた要素を一時的な tmpDiv に追加し、tmpDiv 座標を設定します。
for(var i=0; itmpDiv.style.width=eleDivW ;
tmpDiv.style.backgroundColor="#FFFFFF";
tmpDiv.style.display="block";
tmpDiv.style.top = (mousePos.y - MouseOffset.y)
tmpDiv .style.left = (mousePos.x - MouseOffset.x) "px";
//ドラッグされたオブジェクトの中心点の座標
varragObjCntX=mousePos.x - MouseOffset.x parseInt (dragObject.offsetWidth )/2;
varragObjCntY=mousePos.y -mouseOffset.y parseInt(dragObject.offsetHeight)/2;
//tmpDiv が配置されている列を判定します
varragConLen=DragContainer。長さ;
for (var i=0;ivar curContainer=document.getElementById(DragContainer[i]);
var dcPos=getPosition(curContainer); dcPosMinX=dcPos.x;
var dcWidth=curContainer.offsetWidth;
var dcPosMaxX=dcPosMinX dcWidth; =dcPosMinY dcHeight;
if(dragObjCntX>dcPosMinX&&dragObjCntXdcPosMinY&&dragObjCntYvar activeContainer=curContainer;
}
}
}
/ /ブロック スコープ内でどの tmpDiv がリストされるかを決定します。
if(activeContainer){
var beforNode=null;
var sDiv=activeContainer.getElementsByTagName("div")
var acChiLen=sDiv.length ;
for(j =acChiLen-1;j>=0;j--){
var activeDiv=sDiv[j];
if(activeDiv){
var activeDivPos=getPosition(activeDiv) );
var activeDivMinX =activeDivPos.y;
var activeDivMaxX=activeDivMinY activeDiv.offsetHeight; ;dragObjCntX&&activeDivMaxY>drag ObjCntY){
//if(dragObjCntX>activeDivMinX&&dragObjCntXactiveDivMinY&&dragObjCntY}
}
}
//Ifこのブロックは存在します、ここにあります ブロックの前にドラッグ要素を挿入します
if(beforNode!=null){
if(dragObject.parentNode!=beforNode){
curContainer.insertBefore(dragObject.parentNode,beforNode) ;
dragObject.parentNode.style.display="block";
//document.getElementById("test").value=curContainer.id;存在しない場合は列に要素をドラッグします
else{
curContainer.appendChild(dragObject.parentNode)
dragObject.parentNode.style.display="block";
return false;
}



レイアウトをドラッグできるページが完成し、最終的なページ効果を表示できます
機能は限られており、一部の場所では明確ではないかもしれません。興味がある場合は、自分でコードをよく見てください。
不備がございましたら、お知らせください。
デモコード:







JavaScript ドラッグ レイアウト

	1_2

	2_1

	2_2

	2_3

3_1

		3_2