jQuery 드래그 레이어(가시 영역 내)_jquery

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

(function($){
$.fn .extend( {
mydrag:function(){
var boxX = 0; //페이지 요소의 가로좌표
var boxY = 0; //페이지 요소의 세로좌표
var dMouseX = 0; //마우스를 눌렀을 때 마우스 위치의 가로 좌표
var dMouseY = 0; //마우스를 눌렀을 때의 마우스 위치의 세로 좌표
var mMouseX = 0; /마우스 이동시 마우스 위치의 세로좌표 마우스 위치의 가로좌표
var mMouseY = 0; //마우스 이동시 마우스 위치의 세로좌표
var moveLenX = 0 //저장 마우스 이동 거리, 가로
var moveLenY = 0 ; //마우스가 세로로 이동한 거리 저장
var isMove = false; //레이어 드래그 여부에 대한 입력 "스위치"
var MovingX = 0; //움직이는 요소의 LEFT 값
var MovingY = 0; //움직이는 요소의 TOP 값
//가시 영역의 가장 오른쪽 값
var rightest = document.documentElement.clientWidth - $(".top").parent().outerWidth ();
//시각 영역의 가장 오른쪽 값
var Bottomest = document.documentElement.clientHeight - $(".top").parent ().outerHeight();
//이동 가져오기 마우스 실행 시 마우스 위치 좌표
var getMoveMouse = function(move){
mMouseX = move.pageX
mMouseY; = move.pageY;
}
//페이지의 요소 가져오기
var getbox = function(m){
boxX = $(".box").offset(의 현재 위치 ).left;
boxY = $(".box").offset( ).top
}
//마우스를 눌렀을 때 좌표 가져오기
var getDownMouse = function(m) {
dMouseX = m.pageX;
dMouseY = m.pageY;
}
//마우스 이동 거리 값 가져오기
var getMoveLen = function(){
moveLenX = mMouseX - dMouseX;
moveLenY = mMouseY - dMouseY;
}
/ /마우스가 UP이면 움직임이 꺼지고, 마우스가 움직여도 요소는 움직이지 않습니다.
$( document).mouseup(function(){
isMove = false;
})
//요소의 TOP 바인딩 이벤트
$(this)를 제공합니다.
//요소의 좌표를 가져옵니다. 눌렀을 때의 현재 마우스 위치;
mousedown(function(e){
getbox(e) ;
getDownMouse(e)
isMove = true;
}). /이동 시 이동 거리를 구하고 요소의 TOP 및 LEFT 값을 설정합니다.
mousemove(function(e) {
var $this = $(this);
getMoveMouse(e) ;
getMoveLen();
if(isMove){
//요소가 가시 영역 밖으로 이동하는 것을 방지
//가시 영역 브라우저의 가장 왼쪽
if(movingX< 0){
$this.css({"left":0})
if(movingY<0){
$ this.css({"top":0}); }else if(movingY > 하단){
$this.css({"top":bottomest})
}else{
$this.css({"top":boxY moveLenY}) ;
}
}
//가시 영역 브라우저의 상단
else if(movingY<0){
$this.css({"top":0}); 🎜>if(movingX>rightest){
$this.css({"left":rightest})
}else{
$this.css({"left":boxX moveLenX});
}
}
//가시 영역 브라우저의 가장 오른쪽
else if(movingX > rightest){
$this.css({"left":rightest});
if(movingY > 하단){
$this.css({"top":bottomest})
}else{
$this.css({"top":boxY moveLenY} );
}
}
//가시 영역 브라우저의 하단
else if(movingY > Bottomest){
$this.css({"top":bottomest}) ;
if(movingX$this.css({"left":0})
}else{
$this.css({"left":boxX moveLenX} );
}
}
//다른 상황, 즉 보이는 영역의 중앙
else{
$this.css({"left":boxX moveLenX," top":boxY moveLenY});
}
movingX = boxX moveLenX;
movingY = boxY moveLenY;
}
})
}
})
} ) (jQuery)


주요 아이디어:
　1. 요소는 마우스가 움직이는 만큼 이동하므로 마우스 이동 거리를 구해야 합니다

2. 누르고 이동합니다. 레이어를 드래그하기 전에 마우스를 사용하세요. 그래서 마우스를 눌렀을 때 켜지는 "스위치"가 필요합니다. 여기서 마우스가 움직이면 레이어도 이동하게 되고, 이것이 "끄기"이면 마우스가 움직일 때 레이어도 함께 움직이지 않게 됩니다.
3. 브라우저의 가시 영역에서 레이어 요소, 가장 왼쪽, 가장자리, 위쪽 및 아래쪽 값을 가져옵니다. 그리고 레이어를 드래그하는 과정에서 현재 레이어의 좌표값을 이 값들과 비교하고, 이 값을 초과하는지 확인해보세요. 그러면 더 이상 이 방향으로 끌 수 없습니다. 즉, 값을 최소 또는 최대로 설정할 수 없습니다.
제 판단이 좀 복잡한 것 같아요. 판단을 단순화하는 방법에 대해 조언을 주실 수 있나요?


데모 다운로드