728x90 300x250 SMALL javaScript/jQuery148 드래그 앤 드랍 최종버전 지난 포스팅까지 작업했던 드래그 앤 드랍 이제 거의 완성 한 것 같다. 다 끝난것 같지만 여기에는 치명적인 문제점이 있다. 확인을 위해 mousemove 이벤트에 다음과 같이 콘솔을 찍어보고 실행시켜 콘솔창을 확인해보면 $(document).on("mousemove", function(e){ console.log("mousemove"); }) 이렇게 mousemove 이벤트는 마우스를 대상에 클릭하지 않을때도 실행되는걸 확인할 수 있다. 이 문제를 해결하려면 mousemove와 mouseup 이벤트를 이미지가 드래그되기 시작할때 이벤트 리스너를 등록하고 이미지 드래그가 종료되면 등록한 이벤트 리스너를 삭제하면 된다. 최종버전의 콘솔창을 확인하면 대싱이미지를 클릭한 후에 드래그 했을 경우에만 mousemo.. 2023. 5. 15. 클릭한 이미지 최상단으로 지난 포스팅에서 했던 드래그 앤 드랍 예제를 보면 문제점이 또 있는데 겹쳐진 이미지를 클릭했을때 클릭한 이미지가 최상단으로 오지 않는 문제가 있다. 이 문제를 해결하기 위해 이미지를 클릭했을때 클릭한 이미지가 최상단으로 오는 코드를 추가해보자 zIndex 변수를 만들고 클릭할때마다 클릭한 대상에 z-index를 +1해서 대입해준다. var zIndex=100; $imgs.on("mousedown",function(e){ zIndex++; $dragTarget.css({ "z-index":zIndex }) }) 2023. 5. 14. 마우스 클릭 위치 에러 바로 잡기 (클릭 이미지 기준 위치) 지난 포스팅에서 작성한 드래그 앤 드랍 기능에 문제점이 있으니 클릭한 지점이 아닌 좌측 상단 으로 이동하는 문제가 발생 마우스 클릭 위치 에러 바로 잡기위해서는 이미지에서 드래그 시작 위치 점의 좌표값을 빼주면 된다. 그럼 이미지에서 드래그 위치 좌표값을 어떻게 구할 수 있을까 $imgs.on("mousedown",function(e){ var offset = $dragTarget.offset();//대상 이미지 좌표값 저장 startX = e.pageX-offset.left; startY = e.pageY-offset.top; }) 이미지를 클릭했을때 클릭한 대상의 좌표값을 저장하고 문서에서의 클릭한 지점의 값을 빼준다. 그러면 결국 이미지 안에서 클릭한 지점의 좌표값만 남게 된다. $(document.. 2023. 5. 13. 드래그 앤 드랍 만들기 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.. 2023. 5. 12. 이전 1 ··· 7 8 9 10 11 12 13 ··· 37 다음 728x90 반응형 LIST