jQuery 드래그 앤 드롭 div 구현 ideas_jquery

아이디어는 jquery의 mousemove, mousedown 및 mouseup이라는 세 가지 이벤트를 사용하여 두 개의 상대 위치, 즉

1을 정의하는 것입니다. 구성 요소의 왼쪽 상단 모서리와 화면의 왼쪽 상단 모서리

2. 마우스가 있는 위치는 컴포넌트의 왼쪽 상단을 기준으로 한 좌표입니다.

구체적인 기능은 다음과 같습니다.

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

.drag{
위치:절대;
배경:#0000CC
상단:100px;왼쪽:200px;
패딩:0;

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

$(document).ready (function(){

var move=false;//표시 이동
var _x,_y;//컨트롤 왼쪽 상단에서 마우스의 상대적 위치
$(".drag" ).mousedown(function(e){
move=true ;
_x=e.pageX-parseInt($(".drag").css("left"));
_y=e. pageY-parseInt($(".drag").css(" top"));
})
$(document).mousemove(function(e){
if(move){
var x=e.pageX-_x;//왼쪽 위 모서리에서 화면 왼쪽 위 모서리까지의 상대 위치 제어
var y=e.pageY-_y
$(".drag; ").css({"top":y,"left":x});
}
}).mouseup(function(){
move=false;
});


여기서 e.pageX, e.pageY는 현재 마우스 좌표의 가로, 세로 방향입니다.

직접 해보면 아이디어가 더 명확해질 거예요~