드래그 레이아웃_자바스크립트 기술을 생성하기 위해 자바스크립트를 사용하는 아이디어

왜! 아니면 js 기술이 너무 열악합니다. 정보를 찾아보며 쓴 글이라 깊은 인상을 받지 못한 부분이 많습니다.
시간이 지나면 다시 쓰기 어려울 것 같아서 그때의 생각을 적어보겠습니다! 또한 새우가 나에게 조언을 해줄 수 있기를 바랍니다!
자, 시작하기 전에 본문으로 넘어가서 몇 가지 기능을 소개하겠습니다!
1. 포맷 이벤트 기능

코드 복사 코드는 다음과 같습니다

function getEvent(){
//IE 및 FF 작성 방법 모두와 호환
if(document.all) return window.event;
func=getEvent.caller
while; (func !=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && 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;

var top = 0; while (ele.offsetParent){

left = ele.offsetLeft;
top = ele.offsetParent; ;
}
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에 바인딩했습니다.

코드 복사

var dragObject = null;//드래그된 요소(테이블)
var mouseOffset = null;//드래그된 요소에서 마우스의 위치
var dragDiv =null;//드래그된 테이블이 위치한 컬럼의 div

var eleDivW=null;//드래그된 테이블의 상위 노드(div) 높이 var dragDivLen=null;//The dragged table 열의 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
}
//마우스 드래그 요소 위치 가져오기
function 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()
var mousePos = mouseCoords(ev)
if(dragObject); >dragObject.parentNode.style.display="none";//드래그한 테이블이 있는 div를 숨기도록 설정
//드래그한 테이블을 임시 div에 넣고 좌표를 설정
for( var i =0; itmpDiv.appendChild(
tmpDiv.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";
}
false 반환;
}

movemove에는 당연히 mouseup이 필수입니다

코드 복사 코드는 다음과 같습니다

document.onmouseup = mouseUp;
//마우스 해제
function mouseUp(){
if(dragObject){
if(dragObject.parentNode.style.display=="none") dragObject. parentNode.style .display="block";
dragObject.parentNode.style.border="1px solid #FFCC66";
tmpDiv.style.display="none"
//여기서 열에 뭔가 있는 경우 요소를 드래그할 때 이전에 설정한 높이 값 20px을 지웁니다.
for(var m=0;mvar colDiv=document.getElementById(DragContainer[m ]);
var colDivLen=colDiv.getElementsByTagName("div").length
var colSty=colDiv.getAttribute("style")
if(colDivLen>0&&colSty!=null){
colDiv.removeAttribute(" style");
break;
}
}
dragObject=null;
}
}


참조 드래그할 수 있는 경우 마우스 왼쪽 버튼을 놓으면 드래그된 요소가 원래 위치로 돌아갑니다. 드래그 페이지 효과 보기

마지막으로 해야 할 일은 드래그된 요소가 원래 위치로 돌아가는 것을 방지하는 것입니다. 원래 위치로 돌아왔습니다.
다음은 mousemove 이벤트에 대한 모든 코드입니다. 설명을 보시면 이해가 가능합니다.

코드 복사 코드 다음과 같습니다.

function mouseMove(){
ev=getEvent();
var mousePos = mouseCoords(ev);
if(dragObject){
//드래그 가능한 개체 수 는 1입니다. 이는 드래그 후 이 열에 드래그 요소가 없음을 나타냅니다. 높이 부족으로 인해 이 열이 보이지 않게 하려면 높이를 20px로 설정하세요.
if(dragDivLen==1) dragDiv.style .height="20px";
dragObject.parentNode.style.display="none";
//드래그된 요소를 임시 tmpDiv에 추가하고 tmpDiv 좌표를 설정합니다.
for(var i=0; itmpDiv.appendChild(dragObject.cloneNode(true))
tmpDiv.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";
//드래그된 개체의 중심점 좌표
var dragObjCntX=mousePos.x - mouseOffset.x parseInt (dragObject.offsetWidth )/2;
var dragObjCntY=mousePos.y - mouseOffset.y parseInt(dragObject.offsetHeight)/2;
//tmpDiv가 위치한 열을 판단합니다.
var dragConLen=DragContainer. length;
for (var i=0;ivar curContainer=document.getElementById(DragContainer[i])
var dcPos=getPosition(curContainer); dcPosMinX=dcPos.x;
var dcPosMinY=dcPos.y;
var dcWidth=curContainer.offsetHeight;
var dcPosMaxX=dcPosMinX dcWidth; =dcPosMinY dcHe ight;
if(dragObjCntX>dcPosMinX&&dragObjCntXdcPosMinYvar 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 //if(dragObjCntX>activeDivMinX&&dragObjCntXactiveDivMinY&&dragObjCntYbeforN ode=activeDiv;
}
}
}
//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;
}



자, 레이아웃을 드래그할 수 있는 페이지가 완성되어 최종 페이지 효과를 볼 수 있습니다.
능력이 제한되어 있고, 일부 장소에서는 명확하지 않을 수 있습니다. 관심이 있다면 직접 코드를 잘 살펴보세요.
부족한 점이 있으면 말씀해주세요.
데모 코드:

자바스크립트 드래그 레이아웃

	1_2

	2_1

	2_2

	2_3

3_1

		3_2