집 > 기사 > 웹 프론트엔드 > Bootstrap의 Modal에 드래그 앤 드롭 기능을 추가하는 방법에 대한 자세한 소개

Bootstrap의 Modal에 드래그 앤 드롭 기능을 추가하는 방법에 대한 자세한 소개

PHPz원래의: 2018-06-13 15:54:191866검색

이 글에서는 Bootstrap Modal에 드래그 앤 드롭을 추가하는 자세한 방법을 주로 소개하고 참고용으로 올려드립니다.

인터넷에는 부트스트랩 모달에 대한 드래그 앤 드롭 구현이 많이 있지만 코드 중 상당수가 복잡해 보이고 캡슐화가 좋지 않을 수도 있습니다. jquery를 사용하다 UI의 드래그 앤 드롭 기능은 제가 원하는 것이 아닙니다. 사실 2017년 봄 축제 때 Bootstrap Modal에 드래그 앤 드롭 기능을 추가하던 중 눈 깜짝할 사이에 1년이 지나갔습니다. 2017년 춘절 때 이전 프로젝트의 몇몇 동료들이 레이어를 프런트엔드로 사용했는데, 저처럼 js 프런트엔드에 대한 지식이 부족한 백엔드 개발의 경우 전체 세트를 소개하기가 어려웠습니다. Layui의 일부 구성 요소를 살펴본 후 구성 요소의 기능이 그다지 완전하지 않다는 것을 알았습니다. 조금 더 복잡한 프로젝트는 이후 단계에서 많은 함정을 초래할 것으로 예상됩니다. . 그래서 프론트엔드 CSS 프레임워크로 부트스트랩을 사용했고, 팝업창을 만들기 위해 모달 등의 컴포넌트도 광범위하게 사용했습니다.

단계(3.3.4 이상 3.x 버전 기준):

1. bootstrap.js 소스 코드를 열어 모달 구성 요소 코드 블록을 찾고, Modal 아래에 드래그 앤 드롭 코드 구현을 추가합니다. DEFAULTS 코드 블록.

Modal.DEFAULTS = {
 backdrop: true,
 keyboard: true,
 show: true
}
//新加入的拖拽
Modal.prototype.draggable = function () {
 var $ele = this.$element;
 var mouseOffset;
 var $modalDialog = $ele.find(".modal-dialog");
 var dialogOffset;

 $ele.find(".modal-header").on(&#39;mousedown&#39;, function (event) {
 $(this).addClass({cursor: &#39;move&#39;});
 $(&#39;body&#39;).addClass(&#39;select&#39;);
 dialogOffset = $modalDialog.offset();
 mouseOffset = {
  top: event.pageY - dialogOffset.top,
  left: event.pageX - dialogOffset.left
 };
 $(&#39;body&#39;).on("mousemove", function (event) {
  var left = event.pageX - mouseOffset.left;
  var top = event.pageY - mouseOffset.top;
  if (left < 10) {
  left = 0;
  } else if (left > $(window).width() - $modalDialog.width()) {
  left = $(window).width() - $modalDialog.width();
  }
  if (top < 10) {
  top = 0;
  } else if (top > $(window).height() - $modalDialog.height()) {
  top = $(window).height() - $modalDialog.height();
  }
  $modalDialog.offset({
  top: top,
  left: left
  });
 });
 });

 $(document).on("mouseup mouseleave", function () {
 $(&#39;body&#39;).off("mousemove");
 });
}

2. 모달의 show 메소드에 draggable 메소드를 추가합니다

Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e = $.Event(&#39;show.bs.modal&#39;, {relatedTarget: _relatedTarget})

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    this.isShown = true

    //调用draggable()增加拖拽
    this.draggable()
    this.checkScrollbar()
    this.setScrollbar()
    this.$body.addClass(&#39;modal-open&#39;)

    this.escape()
    this.resize()
    //......省略
}

위 작업을 완료한 후, 드래그를 아주 잘 지원하도록 방금 수정한 소스코드 js를 페이지에 직접 도입하면 전체 드래그가 가능합니다. 보기 창의 범위는 경계를 초과하지 않습니다.

주의 사항: 위의 소스 코드 수정을 완료한 후 부트스트랩 소스 코드를 압축하여 패키징하는 것이 가장 좋습니다. 자동 구성에 익숙하지 않은 분들은 압축을 위해 공개 웹사이트에 올려두시면 됩니다. 웹 페이지 로딩 중 대역폭 사용량을 줄이기 위해 소스 코드를 패키징하고 압축하려면 gulp 및 webpack과 같은 프런트 엔드 자동화 도구를 사용하는 것이 가장 좋습니다. 물론 이 파일이 원본 파일과 어떻게 다른지 명확하게 짐작할 수 있도록 파일 이름을 bootstrap-draggable.min.js와 같은 이름으로 지정하는 것도 좋습니다. 또한 bootstrap3.x 버전의 소스 코드를 직접 다운로드한 다음 내부에서 modal.js를 수정하고 자체 grunt 빌드를 사용하여 다시 패키징할 수도 있습니다.

문제가 발생합니다. 부트스트랩 4.0+ 버전의 소스 코드는 3.x 버전에 비해 모달 구성 요소에 대한 수정 사항이 많지 않습니다. 위의 방법도 사용할 수 있습니다. 모달 중앙 정렬을 포함하여 소스 코드를 수정하여 완성할 수도 있습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Bootstrap의 Modal에 드래그 앤 드롭 기능을 추가하는 방법에 대한 자세한 소개

관련 기사