웹 전단: 자 바스 크 립 트 드래그

웹 전단: 자 바스 크 립 트 드래그
 
앞에서 말 했 듯 이 그림 의 드래그 응용 은 매우 광범 위 하 다. 예 를 들 어 모두 가 알 고 있 는 QQ 전송 파일 은 파일 이나 그림 을 대화 창 으로 드래그 하면 전송 기능 을 완성 할 수 있다.이렇게 편리 한 기능 을 어떻게 배우 지 않 을 수 있 고, 어떻게 못 할 수 있 겠 는가?다음은 제 가 그림 의 드래그 에 대해 여러분 과 간단 한 연 구 를 하 겠 습 니 다.
1. 그림 드래그 의 흐름
    그림 의 드래그 는 사실 세 가지 동작 으로 이 루어 집 니 다. 먼저 그림 을 클릭 하려 면 mousedown 사건 을 촉발 해 야 합 니 다.그 다음은 드래그 입 니 다. mouseover 이벤트 에 사 용 됩 니 다.종점 까지 끌 어 다 놓 고 그림 을 내 려 놓 으 려 면 mouseup 이벤트 가 필요 합 니 다.다음은 이 세 가지 사건 에 대해 각각 시범 을 보 여 준다.
2. onmousedown 시작
브 라 우 저 에서 그림 은 위치 가 정 해 져 있 지만 마 우 스 는 우리 손 에 쥐 어 져 있 습 니 다. 어떻게 그림 이 마우스 가 그 를 가리 키 는 것 을 알 게 합 니까?당연히 마우스 이벤트 에 사용 해 야 한다.많은 사건 중에서 mousedown 이 가장 흔 하 다.마우스 로 누 르 면 왼쪽 버튼 이 든 오른쪽 버튼 이 든 누 르 면 mousedown 이벤트 가 발생 합 니 다.물론, 우 리 는 일반적으로 onmousedown 을 쓰 는데, 여기 서 전체 드래그 과정 을 제어 하 는 데 쓰 인 다.
특히 주의해 야 할 것 은 이곳 의 마우스 사건 은 반드시 document 에 써 야 과정의 순 조로 운 실현 을 보장 할 수 있다 는 것 이다.그렇지 않 으 면 위치 가 정확 하지 않 고 표류 하 는 등 현상 이 나타 날 수 있다.예시: document.onmousemove=move; document.onmouseup=Clearmove;
3. onmouseover 가 이동 중 입 니 다.
끌 어야 할 그림 을 선택 하면 다음 단 계 는 당연히 '그녀' 를 데 리 고 가 야 한다.어디로 데려 가?한 번 에 얼마나 갑 니까?사실은 우리 손 에 있 는 마우스 가 제어 하 는 거 야.여기 서 우 리 는 먼저 마우스 의 현재 위 치 를 동적 으로 가 져 와 야 합 니 다. 자바 script 코드 는 다음 과 같 습 니 다.

 var oevent = window.event||event;
 var clickobj=oevent.target||oevent.srcElement;
 var mouseX = oevent.clientX;
 var mouseY = oevent.clientY;

oevent 와 clickobj 가 모두 사용 하거나 방법 으로 각각 얻 는 이 유 는 IE 와 DOM 진영 에 서로 다른 방법 이 존재 하기 때문이다.mouseX 와 mouseY 는 현재 브 라 우 저 에 비해 마우스 의 가로 좌표 입 니 다.이 두 개의 좌표 가 있 으 면 우 리 는 그림 을 마 우 스 를 따라 이동 시 킬 수 있다.물론 관례 에 따라 이곳 에 도 특별히 주의해 야 할 부분 이 있다.

moveobj.style.left = (mouseX-30) +"px";
 moveobj.style.top =  (mouseY-30) +"px";

위의 코드 에서 우 리 는 그림 의 현재 위 치 는 얻 은 마우스 위치 와 같은 것 이 아니 라 30 을 빼 야 한 다 는 것 을 발견 할 수 있 습 니 다. 이 30 은 무엇 입 니까?사실 예시 중의 그림 은 크기 가 60 * 60 이다.브 라 우 저 에서 그림 의 포 지 셔 닝 은 '왼쪽 상단 모드', 즉 top 과 left 입 니 다.드래그 중 에 우 리 는 매번 그림 의 왼쪽 상단 을 누 르 는 것 이 아니 기 때문에 정확 한 포 지 셔 닝 을 위해 그림 크기 의 절반 을 빼 고 인위적으로 그림 의 왼쪽 상단 을 마우스 위 에 올 립 니 다.
4. onmouseup 배치
목적지 에 도착 하면 마 우 스 를 풀 어야 합 니 다. 그러나 적당 한 onmouseup 함수 가 설정 되 어 있 지 않 으 면 얼마 지나 지 않 아 브 라 우 저가 카드 로 변 하 는 것 을 발견 할 수 있 습 니 다.이것 은 드래그 하 는 과정 에서 setinterval 스 레 드 를 열 었 기 때문에 닫 은 적 이 없습니다.onmouseup 이벤트 의 의 미 는 바로 이 스 레 드 를 닫 는 것 입 니 다. 드래그 가 모두 끝 났 으 니 내 려 놓 아야 합 니 다!

        
var move = 1;
      ，move = 1；
      ，move = 0；
     ，     。

5. 브 라 우 저 에 있 는 모든 요 소 를 끌 어 옵 니 다. (전체 코드)

<script type="text/javascript">
//        
var canmove = 0;
//    onmousedown  
function checkobj(event){
    canmove = 1;
    var oEvent = window.event||event;
    var oMouse=oEvent.target||oEvent.srcElement;
//         X   Y   
    var mouseX = oMouse.clientX;
    var mouseY = oMouse.clientY;  
//           
     var checkobj= oMouse.id;   
}

//    onmouseover  
     function moveobj(event){
if(canmove){
    var oEvent = window.event||event;
    var oMouse=oEvent.target||oEvent.srcElement;
//         X   Y   
     var mouseX = oMouse.clientX;
    var mouseY = oMouse.clientY;  
//           
     var checkobj= oMouse.id;  
//     ，                 
    checkobj.style.left =(mouseX-30)+"px";
   checkobj.style.top =(mouseY-30)+"px";
}
}

//    onmouseup  

function downobj(){
    canmove=0;
}

//       
document. onmousedown=checkobj;
document.onmousemove=moveobj;
document. onmouseup=downobj;

</script>

코드 의 if (canmove) 는 자바 script 의 0 을 가짜 로 하고 0 이 아 닌 진짜 특성 을 이용 합 니 다.