JavaScript에서 드래그 가능한 div를 만드는 방법

Draggable Div를 만드는 방법에 대한 간단한 JavaScript 자습서입니다. JavaScript Draggable Element 기본적인 자바스크립트만 알면 아주 쉽게 만들 수 있습니다.

드래그 가능한 div는 여러 곳에서 볼 수 있습니다. 일반적으로 대규모 애플리케이션과 웹사이트 사이에 많은 시간이 소요됩니다. 그러나 그것들은 매우 진보된 방식으로 만들어집니다. 하지만 심플한 디자인입니다.

Draggable Div는 어디든 드래그할 수 있는 일종의 요소입니다. 여기에서 Draggable profile card 을(를) 만들었습니다.

귀하의 편의를 위해 아래에 미리보기를 제공했습니다. 여기에서 모든 코드와 실시간 미리보기를 찾을 수 있습니다.



이 드래그 가능한 div가 마음에 들고 source codes 또는 파일에 액세스하려는 경우 이 문서에서 쉽게 가져올 수 있습니다.

JavaScript 코드에서 먼저 헤더에 마우스 다운 이벤트를 추가하고 그 함수 내부에 마우스 이동 이벤트를 추가하고 onDrag 함수를 호출했습니다.

✅ HTML 코드:

Draggable Div 요소의 기본 구조는 다음 코드를 사용하여 생성되었습니다.

여기서는 상자와 같은 기본 구조를 만들었습니다. 여기에서 원하는 정보를 추가할 수 있습니다.

<div id="dragable">
  <header id="dragzone">
   <!-- add any information-->
  </header>
</div>

✅ CSS 코드:
아래 코드는 웹 페이지와 드래그 가능한 요소를 디자인한 CSS입니다.

* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}

html,
body {
height: 100%;
}

body {
background: #78c7ed;
font-family: sans-serif;
}

#dragable {
width: 21rem;
height: 21rem;
border: 0.2rem solid #0f2c65;
border-radius: 0.2rem;
position: absolute;
z-index: 9;
box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2);
transition: border-color 0.2s, box-shadow 0.2s;
}

#dragable.drag {
border-color: white;
box-shadow: 3px 6px 24px rgba(0, 0, 0, 0.5);
}

#dragable #dragzone {
width: 100%;
height: 100%;
cursor: move;
z-index: 10;
background-color: #0f2c65;
}

✅ 자바스크립트 코드:
이제 자바스크립트로 이 CSS 드래그 가능한 div를 활성화할 시간입니다.

여기서는 약간의 고급 자바스크립트를 사용하지만 초급반도 이해하기 어렵지 않을 것입니다.

const dragElement = (element, dragzone) => {
    let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;
//MouseUp occurs when the user releases the mouse button
    const dragMouseUp = () => {
      document.onmouseup = null;
//onmousemove attribute fires when the pointer is moving while it is over an element.
      document.onmousemove = null;

      element.classList.remove("drag");
    };

    const dragMouseMove = (event) => {

      event.preventDefault();
//clientX property returns the horizontal coordinate of the mouse pointer
      pos1 = pos3 - event.clientX;
//clientY property returns the vertical coordinate of the mouse pointer
      pos2 = pos4 - event.clientY;
      pos3 = event.clientX;
      pos4 = event.clientY;
//offsetTop property returns the top position relative to the parent
      element.style.top = `${element.offsetTop - pos2}px`;
      element.style.left = `${element.offsetLeft - pos1}px`;
    };

    const dragMouseDown = (event) => {
      event.preventDefault();

      pos3 = event.clientX;
      pos4 = event.clientY;

      element.classList.add("drag");

      document.onmouseup = dragMouseUp;
      document.onmousemove = dragMouseMove;
    };

    dragzone.onmousedown = dragMouseDown;
  };

  const dragable = document.getElementById("dragable"),
    dragzone = document.getElementById("dragzone");

  dragElement(dragable, dragzone);

위의 코드를 사용하여 JavaScript Draggable Div 을 생성하는 방법을 알 수 있기를 바랍니다.

문제가 있으면 댓글을 달아야 합니다. 원하는 경우 모든 코드를 다운로드하여 Draggable Div 요소를 만들 수 있습니다.