jQuery 버전 요소 드래그 프로토타입 code_jquery

이 기사에서는 주로 드래그 앤 드롭 프로토타입을 분석하고 JQuery를 처음 접하는 팬을 위한 간단한 예를 제공합니다.
Jquery.js 소개 후:

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

< script type="text/javascript">
$(function(){
//드래그 요소 객체 바인딩
bindDrag(document.getElementById('test'));
} ) ;
function binDrag(el){
//초기화 매개변수
var els = el.style,
//마우스의 X 및 Y축 좌표
x = y = 0;
//사악한 검지
$(el).mousedown(function(e){
//요소를 누른 후 현재 마우스 위치를 계산합니다
x = e.clientX - el.offsetLeft ;
y = e.clientY - el.offsetTop;//IE에서 포커스 캡처
el.setCapture && el.setCapture()
//Binding 이벤트
$(document) .bind ('mousemove',mouseMove).bind('mouseup',mouseUp);
})
//Move event
function mouseMove(e){
//Universe 슈퍼 무적 작업 ..
els.top = e.clientY - y 'px';
els.left = e.clientX - x 'px'
}
//이벤트 중지
함수 mouseUp (){
//IE에서 포커스 해제
el.releaseCapture && el.releaseCapture()
//Uninstall event
$(document).unbind('mousemove',mouseMove). unbind ('mouseup',mouseUp);
}
}

다운로드:
전체 예