부트스트랩에서 구성 요소를 끌어서 놓는 방법

단계(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");
 });
}

관련 추천: "

bootstrap 입문 튜토리얼"

2. 모달의 show 메소드에서 호출할 수 있는 드래그 가능한 메소드를 추가합니다# 🎜🎜#

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 버전에 비해 모달 구성 요소에 큰 수정이 없습니다. 위의 방법도 사용할 수 있습니다. 모달 중앙 정렬을 포함하여 소스 코드를 수정하여 완성할 수도 있습니다.

위 내용은 부트스트랩에서 구성 요소를 끌어서 놓는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!