드래그 앤 드랍 만들기 drag and drop

드래그 앤 드랍 의 동작을 나눠보면

1. 대상을 클릭

2. 클릭한 상태로 마우스 이동

3. mouseup

 

 

즉 이 3가지 동작을 실행했을때 각각 에 함수를 넣어준다.

$imgs.on("mousedown",function(e){
    $dragTarget = $(this);
    dragY=true;
})

//문서에서 마우스를 이동했을때
$(document).on("mousemove", function(e){
    if(dragY==true){
        e.preventDefault();

        //문서에서 클릭한 마우스 위치값을 변수에 저장
        var endX = e.pageX;
        var endY = e.pageY;

        //클릭한 이미지의 위치를 마우스 위치로 설정
        $dragTarget.offset({ //전역위치 설정
            left:endX,
            top:endY
        })
    }
})

$(document).on("mouseup",function(e){
    dragY=false;
    $dragTarget=null;
})

 

이미지 랜덤하게 출력하기 예제에 드래그앤 드랩 기능을 추가해보자

 

이렇게 하면 드래그앤 드랍 기능이 추가된걸 확인 할 수 있다.

그런데... 뭔가 이상하다 클릭한 지점을 기준으로 이동하는 것이 아니라 대상 이미지의 좌측 상단 지점으로 이동 한 뒤에 드래그 되는걸 확인 할 수 있다.

이 문제 해결은 다음 포스팅에서 ..

 

 

 

offset() 메서드에 대해서

https://moo-you.tistory.com/869

전역 위치 설정하기 offset