• 회원가입
  • 로그인
  • 구글아이디로 로그인

[js] JS - Drag & Drop (= Draggable) - 요소이동 (= 요소끌어이동 = 드래그앤드롭 = 드래거블)

Drag & Drop 예제 

 

<style>

#hz {

  position: absolute;

  z-index: 9;

  text-align: left;

  border: 1px solid silver;

}

 

#hz p {padding:5px;}

 

#hzheader {

  padding: 10px;

  cursor: move;

  z-index: 10;

  background-color: #2196F3;

  color: #fff;

}

</style>


<div id="hz">

  <div id="hzheader">이동하려면 여기 클릭</div>

  <p>홈짱닷컴</p>

  <p>Homzzang.com</p>

  <p>홈페이지 제작관리강의</p>

</div>


<script>

// 드래그 가능한 요소 생성

dragElement(document.getElementById("hz"));


function dragElement(elmnt) {

  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

  // 이동 목적지

  if (document.getElementById(elmnt.id + "header")) {

    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;

  } else {

    elmnt.onmousedown = dragMouseDown;

  }


  function dragMouseDown(e) {

    e = e || window.event;

    e.preventDefault();

    // 시작지점 마우스좌표 얻기

    pos3 = e.clientX;

    pos4 = e.clientY;

    document.onmouseup = closeDragElement;

    // 이동지점 마우스좌표 얻기

    document.onmousemove = elementDrag;

  }


  function elementDrag(e) {

    e = e || window.event;

    e.preventDefault();

    // 이동지점 커서좌표 계산

    pos1 = pos3 - e.clientX;

    pos2 = pos4 - e.clientY;

    pos3 = e.clientX;

    pos4 = e.clientY;

    // 요소의 새 위치 설정

    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";

    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";

  }


  function closeDragElement() {

    /* 마우스버튼 풀렸을 때, 이동 멈춤 */

    document.onmouseup = null;

    document.onmousemove = null;

  }

}

</script>

 

결과보기

관련글 https://homzzang.com/b/jquery-282

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
js JS - getRangeAt() 메서드
js JS - rules 속성 - styleSheets 객체의 속성
js JS - 특정요소 함수실행제외 (= 배열문자열포함검사) ★★★★★
js JS - Keyboard KeyCode (키보드키코드 = 키보드키번호 = 키보드키조회 = 키보드코드 = 키보…
js JS - ctrlKey, altKey, shiftKey 속성 - Ctrl키, Alt키, Shift키 눌림여부…
js JS - 숫자만 입력 가능
js JS - 클릭버튼생성 (= 클릭탭생성), 자식요소개별아이디부여, 클릭요소삭제 (= 클릭요소제거 = 클릭부모요…
js JS - F12키차단 (=개발자도구차단) + 마우스오른쪽금지 (= 마우스오른쪽차단 = 불펌방지 = 클릭방지)
js JS - Drag & Drop (= Draggable) - 요소이동 (= 요소끌어이동 = 드래그앤드롭 = 드…
js JS - INPUT입력값을 GET방식으로 넘기기 (=인풋값, 인풋입력밧, 겟방식전달)
js JS - 아이피 유효성검사 (= 아이피 유효성체크 = 아이피 적합성검사 = 아이피 적합성체크)
js JS - Lazyload (레이지로드)
js JS - 스크롤고정 스크롤스파이 메뉴 (= 매뉴얼메뉴 Smooth Scrolling Sticky Scroll…
js JS - 마우스오버 시, 오디오재생 (= mp3재생 = 소리재생)
js JS - 숫자제거 공백제거 정규표현식
js JS - 3D 입체 영상 (= 입체 화면 = 이미지 파노라마 360도 회전 영상 = Image Panoram…
js JS - m3u8 ★ (동영상재생 + 플레이어 다운 + 동영상다운로드 : 엠삼유팔 = 엠쓰리유팔 )
js JS - 이전페이지 보내기 (= 기존페이지로 돌아가기) 3가지방법
js JS - 각종 게임 무료다운로드 주소 좌표 (= 게임다운좌표)
js JS - 서브도메인 입력 후 해당 주소로 이동
1/4
목록
찾아주셔서 감사합니다. Since 2012