드래그 앤 드롭 클로저 기능의 js 구현 세부 소개_javascript 기술

/**
* JetBrains WebStorm으로 작성되었습니다.
* 사용자: lsj
* 날짜: 12-11-24
* 시간: 下午12:59
* 이 템플릿을 변경하려면 파일 | 설정 | 파일 템플릿.
*/
var dragmanager=(function()
{
//모바일 요소의 z축 좌표 식별
var index_z=1 ;
//현재 드래그 요소
var drganow; 클릭됨
varrelativex=0;//마우스를 클릭했을 때 div 상단으로부터의 거리
varrelativey=0
//마우스가 밖으로 나갔는지 식별
var isout=false;
return {
/* *
* 마우스 리프트 이벤트를 문서에 바인딩합니다. 주로 마우스가 너무 빨리 움직이거나 엘 영역에서 튀어나오는 것을 방지합니다
*/
bingDocOnMouseUp:function()
{
//주로 마우스 방지를 위해 전역 onmouseup 이벤트를 등록합니다. 너무 빨리 움직여서 마우스와 el이 동기화되지 않게 됩니다.
document.onmouseup=function( e)
{
var ev = window.event || e; dragbegin)
{
//div의 상대 위치 변경
drganow.style.left = (ev.clientX-relativex) 'px'
drganow.style.top=(ev. clientY-relativey) 'px';
drganow.style.cursor='normal';
dragbegin= false
isout=false;
}
},
/**
* 주입된 요소에 이벤트 바인딩
* @param el
*/
registerElementEv:function(element)
{
element .onmousedown=function(e)
{
var ev = window.event || e;
var clientx=ev.clientX;
var clienty= ev.clientY;
var left=parseInt(this.style.left.substring(0, this.style.left.indexOf("p") )); var top= parsInt(this.style.top .indexOf("p")));
relativex=clientx-left; clienty-top;
index_z ;
drganow=this ;
dragbegin=true;
element.onmousemove=function(e) 🎜>{
var ev = window.event || e;
//드래그 시작
if(dragbegin)
{
//div의 상대 위치 변경
.style.left= (ev.clientX-relativex) 'px';
this.style.top=(ev .clientY-relativey) 'px'
this.style.cursor='move'; 🎜>}
}
element.onmouseout=function(e)
{
isout= true;
}
element.onmouseup=function(e)
{
var ev = window.event || e;
if(dragbegin)
{
// div의 상대 위치 변경
drganow.style.left= (ev.clientX-relativex) 'px';
drganow.style.top=(ev.clientY-relativey) 'px';
drganow.style.cursor='normal';
dragbegin=false; >}
}
}
})();


1. 추후 이동 과정에 필요한 모든 변수를 용이하게 하기 위해 클로저 형태로 구현됩니다.
2. 드래그하는 동안 마우스가 너무 빨리 움직이고 움직이는 요소가 마우스의 움직임을 따라잡을 수 없으므로 이 스위치의 document.oumouseup 이벤트를 등록해야 합니다. 이벤트는 움직이는 요소의 onmouseout 이벤트에 의해 트리거됩니다
3. 브라우저 자체의 onmousemove 선택 이벤트는 드래그 프로세스 중에 트리거될 수 있으며 IE는 onmousemove="document .selection.empty()"입니다.