Bootstrap Modal은 드래그 앤 드롭 방법 예제를 추가합니다.

이 글은 부트스트랩 모달에 드래그 앤 드롭을 추가하는 방법을 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

인터넷에는 Bootstrap Modal에 대한 드래그 앤 드롭 구현이 많이 있지만 코드 중 상당수가 복잡해 보이고 캡슐화되지 않을 수도 있습니다. 심지어 일부는 jquery UI의 드래그 앤 드롭 기능을 사용하기도 합니다. 사실 2017년 봄 축제 때 부트스트랩 모달에 드래그 앤 드롭 기능을 추가하고 있었는데, 눈 깜짝할 사이에 1년이 지나갔습니다. 2017년 춘절 때 이전 프로젝트의 몇몇 동료들이 프론트엔드로 레이어를 사용했는데, 백엔드 개발을 위해 js 프론트엔드에 대한 지식이 부족한 저로서는 전체를 소개하기가 어려웠습니다. layer와layui 같은 것들의 집합입니다.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('mousedown', function (event) {
 $(this).addClass({cursor: 'move'});
 $('body').addClass('select');
 dialogOffset = $modalDialog.offset();
 mouseOffset = {
  top: event.pageY - dialogOffset.top,
  left: event.pageX - dialogOffset.left
 };
 $('body').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('show.bs.modal', {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('modal-open')

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

위 작업을 완료한 후 방금 수정한 소스코드 js를 페이지에 직접 도입하면 이미 드래그를 지원하고 있습니다. 음, 전체 드래그는 시각적 창의 범위 내에 있으며 경계를 초과하지 않습니다.

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

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

관련 권장사항:

JS로 구현된 간단한 드래그 앤 드롭 장바구니 기능

TP5는 webuploader를 통합하여 미리보기 드래그 앤 드롭 검색 및 삭제를 구현합니다.

zTree 플러그를 사용하는 jQuery에 대한 설명 예 -in 드래그 앤 드롭 기능 구현

위 내용은 Bootstrap Modal은 드래그 앤 드롭 방법 예제를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!