728x90 300x250 SMALL javaScript545 클릭한 이미지 최상단으로 지난 포스팅에서 했던 드래그 앤 드랍 예제를 보면 문제점이 또 있는데 겹쳐진 이미지를 클릭했을때 클릭한 이미지가 최상단으로 오지 않는 문제가 있다. 이 문제를 해결하기 위해 이미지를 클릭했을때 클릭한 이미지가 최상단으로 오는 코드를 추가해보자 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. 이미지 랜덤하게 출력하기 jQuery 코드 var $imgs = null; $(document).ready(function(){ init(); initPos(); }) function init(){ $imgs = $(".container img"); } function initPos(){ $imgs.each(function(){ let left = Math.floor(Math.random()*400); let top = Math.floor(Math.random()*400); $(this).css({ left:left, top:top }) }) } $imgs 변수를 만들어서 .container img들을 가져온다. each 메서드를 사용해서 각각의 이미지들에 랜덤한 값을 left와 top 변수에 저장 랜덤한 수치를 css 적용한다. 2023. 5. 10. 이전 1 ··· 32 33 34 35 36 37 38 ··· 137 다음 728x90 반응형 LIST