728x90 300x250 SMALL javaScript/jQuery153 드래그 앤 드랍 만들기 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. 스크롤을 내리면 상단에 고정되는 메뉴 만들기 스크롤을 내리면 Fixed Menu Example 영역이 상단에 고정됨 2023. 5. 9. 드래그앤 드랍 만들기 - 비공개 보호되어 있는 글 입니다. 2023. 5. 8. 이전 1 ··· 9 10 11 12 13 14 15 ··· 39 다음 728x90 반응형 LIST