js_layout 및 레이어의 가장 간단한 드래그 앤 드롭 효과 구현 코드

사실 팝업 레이어의 경우 드래그의 원래 목적은 매우 간단합니다. 즉, 레이어를 당겨서 팝업 레이어에 의해 가려진 내용을 보이게 하는 것입니다(물론 드래그 앤 드롭 기능입니다. 이후 지속적으로 최적화되어 드래그 앤 드롭 애플리케이션이 유용해졌습니다. 즉, 가장 일반적인 예는 사용자가 드래그 앤 드롭을 통해 콘텐츠 모듈의 순서와 위치를 맞춤 설정할 수 있는 iGoogle의 맞춤 홈페이지입니다.

이 글의 초점은 고급 글인 iGoogle의 드래그 앤 드롭 효과가 아닙니다. 이 글은 제목에서 알 수 있듯이 드래그 앤 드롭의 '1단계'입니다. 가장 간단한 드래그 앤 드롭을 구현합니다.
여기서 '가장 단순하다'는 것은 여러 드래그 레이어의 스택 순서, 드래그 범위 제한, iGoogle의 'dragTo'와 유사한 효과 등을 고려하지 않는다는 의미입니다. . .

자, 더 이상 고민하지 말고 먼저 예를 보여드리겠습니다.

나를 드래그해 보세요...
콘텐츠...여기를 클릭하세요-->모두 삽입하기 때문에 열기 페이지에 직접 코드를 올리고, 블로그파크의 타사 플러그인으로 인해 코드 실행 효율은 높지만 원활하게 실행되지 않을 수 있습니다.

드래그 앤 드롭에는 실제로 세 가지가 필요합니다. 마우스 이벤트 onmousedown, onmouseup, onmousemove의 일부는 마우스 위치 획득과 레이어의 왼쪽 및 상단 획득과 결합되어 비슷한 효과를 얻을 수 있습니다.

코딩할 때 주의해야 할 두 가지가 있습니다. 하나는 현재 스타일을 가져오는 것입니다. currentStyle은 IE에서만 유효하므로 IE가 아닌 경우 getCompulatedStyle을 통해 이를 얻을 수 있습니다. 속성이 많지 않은 경우 obj.style[key]를 직접 사용하여 현재 원하는 속성 값을 얻을 수도 있습니다)

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

function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputeStyle (o,null)[key ]}//ie5.0 전용 'currentStyle'

또 다른 점은 마우스 위치를 가져올 때 이벤트를 사용한다는 것입니다. 이벤트가 매우 이상합니다. IE와 moz 커널에서는 전역 변수이므로(정확하지는 않고 이해하기 쉬움) 마우스 위치를 얻을 때 이벤트에 대한 판단이 필요합니다

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

bar.onmousedown = function(e){
e = e?e :window.event; //'이벤트' 지역 변수, ff 전역 변수
params.isDrag =
params._X = e.clientX;
};

위의 두 가지 사항에 주의하세요. 실제로 올바른 아이디어를 조합하는 것이 가능하며 어렵지 않습니다. 아래에 참조 코드가 제공됩니다.

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

function getStyle(o,key){return o.currentStyle ? o.currentStyle[key] : document.defaultView.getCompulatedStyle(o,null)[key]}//ie5.0에만 'currentStyle'

var drag = function(bar, target){
var params = {
startLeft:0,
startTop:0,
_X:0,
_Y:0,
isDrag:false
}
if(getStyle) (target,'left') != 'auto'){params.startLeft = getStyle(target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
bar.onmousedown = function(e){
e = e ?e:window.event; //'event' 지역 변수, 즉 ff params.isDrag = true;
params._X = e.clientX; params._Y = e.clientY;
}
document.onmouseup = function(){
params.isDrag = false;
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle( target,'left')}
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')}
}
document.onmousemove = function(e){
var e = e?e:window.event; 🎜>if(params.isDrag){
var curX = e.clientX, curY = e.clientY, desL = curX -params._X parseInt(params.startLeft), desT = curY-params._Y parseInt(params. startTop);
target.style['left'] = desL>=0?desL 'px':0;
target.style['top'] = desT>=0?desT 'px':0 ;
}
}
};


글은 여기까지입니다. 유사한 iGoogle 드래그 앤 드롭 고급 글에 관해서는 다음에 계속하겠습니다. 드래그 앤 드롭이 결합된 포괄적인 팝업 레이어의 예입니다.

옵션 매개변수가 없는 상자(기본값은 높이 200px, 너비 300px)

마스크되지 않은 상자
이 팝업 레이어 플러그인은 위에서 말씀드렸던 것이고, 소스파일 다운로드도 제공되어 있어서 그냥 여기에 추가했습니다. 그냥 드래그 효과일 뿐입니다 ps: 코드 하이라이팅으로 인해 플러그인을 사용하면 마스크 레이어에 아직 처리되지 않은 작은 흰색 사각형이 생깁니다. . .