모달팝업 드래그 영역 제한에 대한 질문입니다.

모달팝업 드래그 영역 제한에 대한 질문입니다.

QA

모달팝업 드래그 영역 제한에 대한 질문입니다.

본문

안녕하세요.

프론트엔드를 꿈꾸는 반만 프론트엔더(+웹디자인)입니다.ㅎ

다름이 아니라

제가 만드는 관리자 페이지에서 모달팝업을 이용해서 정해진 영역안에 다수의 팝업을 정렬하고 있습니다.

자바스크립트 소스를 구글 검색을 통해 업어왔는데요.

다 좋은데 아쉽게도 영역 제한이 안됩니다.ㅜ

그니까 팝업 머리를 잡고 드래그를 하면 머물러야 할 영역 밖으로까지 드래그가 됩니다.

이 부분을 수정하고 싶은데 어디를 어떻게 해야할지 아무리 검색해도 안나오고 머리 아프네요..

임시로 제이쿼리의 containment : 'parent' 소스를 푸터에 별도로 넣어보니 영역 제한은 잘 되는데 문제는 리사이즈시 드래그도 같이 작용해서 딸려온다는 거예요...ㅜ

검색해서 찾은 소스가

window.onload = function() {
  initDragElement();
  initResizeElement();
};

function initDragElement() {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  var popups = document.getElementsByClassName("popup");
  var elmnt = null;
  var currentZIndex = 100; //TODO reset z index when a threshold is passed

  for (var i = 0; i < popups.length; i++) {
    var popup = popups[i];
    var header = getHeader(popup);

    popup.onmousedown = function() {
      this.style.zIndex = "" + ++currentZIndex;
    };

    if (header) {
      header.parentPopup = popup;
      header.onmousedown = dragMouseDown;
    }
  }

  function dragMouseDown(e) {
    elmnt = this.parentPopup;
    elmnt.style.zIndex = "" + ++currentZIndex;

    e = e || window.event;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    if (!elmnt) {
      return;
    }

    e = e || window.event;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = elmnt.offsetTop - pos2 + "px";
    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }

  function getHeader(element) {
    var headerItems = element.getElementsByClassName("popup-header");

    if (headerItems.length === 1) {
      return headerItems[0];
    }

    return null;
  }
}

function initResizeElement() {
  var popups = document.getElementsByClassName("popup");
  var element = null;
  var startX, startY, startWidth, startHeight;

  for (var i = 0; i < popups.length; i++) {
    var p = popups[i];

    var right = document.createElement("div");
    right.className = "resizer-right";
    p.appendChild(right);
    right.addEventListener("mousedown", initDrag, false);
    right.parentPopup = p;

    var bottom = document.createElement("div");
    bottom.className = "resizer-bottom";
    p.appendChild(bottom);
    bottom.addEventListener("mousedown", initDrag, false);
    bottom.parentPopup = p;

    var both = document.createElement("div");
    both.className = "resizer-both";
    p.appendChild(both);
    both.addEventListener("mousedown", initDrag, false);
    both.parentPopup = p;
  }

  function initDrag(e) {
    element = this.parentPopup;

    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(
      document.defaultView.getComputedStyle(element).width,
      10
    );
    startHeight = parseInt(
      document.defaultView.getComputedStyle(element).height,
      10
    );
    document.documentElement.addEventListener("mousemove", doDrag, false);
    document.documentElement.addEventListener("mouseup", stopDrag, false);
  }

  function doDrag(e) {
    element.style.width = startWidth + e.clientX - startX + "px";
    element.style.height = startHeight + e.clientY - startY + "px";
  }

  function stopDrag() {
    document.documentElement.removeEventListener("mousemove", doDrag, false);
    document.documentElement.removeEventListener("mouseup", stopDrag, false);
  }
}
입니다.

여기에 영역을 정해서 그안에서만 움직이게 할 수 있는 방법이 뭐가 있을까요?

그니까 예를들면 넓이 900px로 설정된 div 안에서만 드래그 이동을 하고 싶습니다.

혹시 답변 주실 고마운 분 계실까요?

(링크로 현재 만들고 있는 사이트 연결해드렸으니 참고해주시면 고맙겠습니다~)

이 질문에 댓글 쓰기 :

답변 3

https://stackoverflow.com/questions/4903863/resizable-draggable-object-in-jquery-possible

jquery 로 drag, resize 같이 동작하는 예제네요

jquery 사용하셔도된다면 https://jqueryui.com/draggable/ 이걸로 접근하시는게 어떨까요?

먼저 답변 주셔서 고맙습니다.
제이쿼리로 접근해도 되는데 사이즈 조절도 같이 되어야 하거든요 ㅜ
모서리를 끌어서 늘렸다 줄였다요...
저도 알려주신 사이트 방문해보긴 했거든요 ㅎ

function stopDrag() {

이 구간에서 div의 위치가 지정된 곳에서 벗어나면 강제로 위치를 바꾸면 되지 않을까요

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT