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

[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)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012