How to drag and drop components in bootstrap

Steps (based on 3.3.4 or higher 3.x version):

1. Open bootstrap Find the modal component code block in the .js source code, and add drag and drop code under the Modal.DEFAULTS code block to implement it.

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

Related recommendations: "Bootstrap Getting Started Tutorial"

2. Add and call the draggable method in the show method of modal

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()
    //......省略
}

to complete the above operation After directly introducing the source code js that was just modified, the page can already support drag and drop very well, and the entire drag and drop is within the scope of the visual window and will not exceed the boundary.

Note: After completing the above source code modification, it is best to compress and package the bootstrap source code. Those who are not familiar with automatic construction can put it on an open website for compression. Those who are familiar with automatic construction are best to use front-ends such as gulp and webpack. Automated tools to package and compress source code to reduce bandwidth usage during web page loading. Of course, it is also recommended to name the file something like bootstrap-draggable.min.js so that you can clearly guess how this file is different from the original file. In addition, you can also directly download the source code of the bootstrap3.x version, then modify the modal.js inside, and then use its own grunt build to repackage it.

The problem arises: Compared with the 3.x version, the source code of the bootstrap 4.0 version does not have much modification to the modal component. The above method can also be adopted. Including centering the modal, you can also modify the source code to complete it.

The above is the detailed content of How to drag and drop components in bootstrap. For more information, please follow other related articles on the PHP Chinese website!