1. 서문
마우스 드래그 요소의 목적은 고정 포지셔닝을 위해 많은 작은 도트를 드래그 한 다음 HTML을 복사하여 페이지의 개발 코드에 붙여 넣는 것입니다. jQuery.fn.draggable 플러그인을 사용해야했습니다.
2. 디자인 아이디어
드래그 요소의 마우스 버튼을 바인딩하고 마우스를 바인딩하여 문서 객체에서 움직이면 마우스가 이벤트가 튀어 나옵니다.
세 가지 이벤트를 모두 드래그 요소에 바인딩하지 않겠습니까? 마우스가 너무 빨리 움직일 때 마우스가 움직이지 않아 팝업 이벤트 핸들러가 실행되지 않기 때문입니다.
코드 사본은 다음과 같습니다.
$ target.bind ( 'Mousedown', fn);
$ (문서)
.Bind ( 'MouseMove', FN)
.Bind ( '마우스 업', fn);
3. 소스 코드 구현 세부 사항
소스 코드를 구현하는 데 주목해야 할 사항이 많이 있습니다.
첫째, 마우스 프레스 이벤트에서 요소를 클릭하고 드래그 할 때 텍스트가 선택 될 수 있습니다.
코드 사본은 다음과 같습니다.
// Chrome Firefox IE9의 지역 텍스트가 선택되는 것을 방지합니다.
e.preventDefault ();
// Firefox IE9 ||
window.getSelection?
2. 드래그 요소가 이미지 (IMG 태그) 인 경우 마우스는 단기 거리 동안 이미지를 드래그하고 금지 프롬프트가 나타납니다. 즉, 이미지를 드래그 할 수 없습니다.
이것은 브라우저의 기본 동작이므로 브라우저의 기본 동작을 차단하십시오.
코드 사본은 다음과 같습니다.
e.preventDefault ();
3. 경계에 대한 질문 (드래그 범위 처리)
처음에 구현 된 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
// x, y는 드래그 요소에 의해 설정할 왼쪽 및 최고 값을 나타내고, LimitoBJ는 드래그 영역 범위 객체이며 테스트 중에 문제가 발견되었습니다.
// 드래그 프로세스 중에 때때로 드래그하는 객체는 경계에 직접 가깝지 않습니다.
if (x> = limitobj._left && x <= limitobj._right) {
$ target.css ({왼쪽 : x + 'px'});
}
if (y> = limitobj._top && y <= limitobj._bottom) {
$ target.css ({top : y + 'px'});
}
더 이상 : 위의 문제가 발생하는 이유는 변수 x가 limitobj._right보다 적을 수 있기 때문입니다.
따라서 코드는 다음과 같이 처리해야합니다.
코드 사본은 다음과 같습니다.
if (x <limitobj._left) {
x = limitobj._left;
}
if (x> limitobj._right) {
x = limitobj._right;
}
if (y <limitobj._top) {
y = limitobj._top;
}
if (y> limitobj._bottom) {
y = limitobj._bottom;
}
$ target.css ({왼쪽 : x + 'px', 상단 : y + 'px'});
마지막 으로이 문제를 해결했지만 CloudGamer는 더 나은 방법을 제공했습니다.
코드 사본은 다음과 같습니다.
$ target.css ({
왼쪽 : math.max (Math.min (x, limitobj._right), limitobj._left) + 'px',
상단 : Math.max (Math.min (y, limitobj._bottom), limitobj._top) + 'px'
});
완전한 프로그램 소스 코드 :
코드 사본은 다음과 같습니다.
$ .fn.extend ({
/**
* 자동 : 블로그 Yuan Huazi YJH 2014/02/21
*/
드래그 : 함수 (옵션) {
Var Dragstart, Dragmove, Dragend,
$ BoundaryElem, LimitoBJ;
함수 _initoptions () {
var noop = function () {}, 기본값;
defaultoptions = {// 기본 구성 항목
경계 : '바디'// 경계 컨테이너
};
옵션 = $ .extend (기본값, 옵션 || {});
$ boundaryElem = $ (옵션 .boundaryElem);
DragStart = 옵션. DRAGSTART ||
Dragmove = 옵션. Dragmove ||
드래그 = 옵션.
}
함수 _drag (e) {
Var ClientX, Clienty, OffSetLeft, OffsetTop,
$ target = $ (this), self = this;
limitobj = {
_left : 0,
_top : 0,
_right : ($ boundaryElem.innerWidth () || $ (Window) .width ()) - $ target.outerWidth (),
_bottom : ($ boundaryElem.innerHeight () || $ (창) .height ()) - $ target.outerheight ()
};
// 마우스를 눌렀을 때 위치를 기록하고 드래그 요소의 상대 위치를 기록합니다.
clientx = e.clientx;
클라이언트 = E.Clienty;
OffSetLeft = this.OffSetLeft;
OffSetTop = this.OffSetTop;
Dragstart.Apply (this, arguments);
$ (Document) .Bind ( 'MouseMove', MoveHandle)
.Bind ( '마우스 업', Uphandle);
// 마우스 움직임 이벤트 처리
기능 moveHandle (e) {
var x = e.clientx -clientx + offsetleft;
var y = E.Clienty- 클라이언트 + 오프셋 탑;
$ target.css ({
왼쪽 : math.max (Math.min (x, limitobj._right), limitobj._left) + 'px',
상단 : Math.max (Math.min (y, limitobj._bottom), limitobj._top) + 'px'
});
Dragmove.apply (자기, 논쟁);
// 브라우저의 기본 동작을 차단합니다 (마우스는 짧은 거리의 이미지를 드래그합니다. 금지 프롬프트가 나타납니다. 즉, 이미지가 더 이상 드래그 할 수 없습니다).
e.preventDefault ();
}
// 마우스 바운스 이벤트 처리
기능 Uphandle (e) {
$ (Document) .unbind ( 'MouseMove', MoveHandle);
Dragend.Apply (자기, 논쟁);
}
}
_initoptions (); // 구성 객체를 초기화합니다
$ (this)
.CSS ({위치 : '절대'})
.Each (function () {
$ (this) .bind ( 'Mousedown', function (e) {
_drag.Apply (this, [e]);
// Chrome Firefox IE9의 지역 텍스트가 선택되는 것을 방지합니다.
e.preventDefault ();
// Firefox IE9 ||
window.getSelection?
});
});
이것을 반환하십시오;
}
});
인스턴스 호출 :
코드 사본은 다음과 같습니다.
// 인스턴스를 호출하십시오
(기능(){
$ ( '. drag-elem'). 드래그 ({{
경계 : '#Boundary',
드래그 스타트 : function () {
$ (this) .html ( '<span> 드래그 준비 </span>'). css ({zindex : 2}). siblings (). css ({zindex : 1});
},
Dragmove : function () {
var pos = $ (this) .position ();
$ (this) .html ( '<span> drag (' + pos.left + ',' + pos.top + ') </span>');
},
드래그 : function () {
$ (this) .html ( '<span> 드래그 엔드 </span>');
}
});
} ());