Detailed introduction to adding drag and drop function to Modal in Bootstrap

This article mainly introduces the detailed method of adding drag and drop to Bootstrap Modal. Now I share it with you and give it as a reference.

[Related video recommendation: Bootstrap Tutorial]

There are many drag-and-drop implementations for Bootstrap Modal on the Internet, but many of the codes look relatively different. The encapsulation of the complex feeling may not be very good, and some even use the drag and drop function of jquery ui, which is not what I want. In fact, I was adding the drag and drop function to Bootstrap Modal during the Spring Festival of 2017. , one year passed in a blink of an eye. During the Spring Festival of 2017, some colleagues in the previous project used layer as the front end, but for back-end development like me, who has a little knowledge of js front-end, it was difficult for me to introduce a whole set of things like layer and layui. It used to be roughly After browsing some components of layui, I found that the functions of the components are not very complete. It is foreseeable that slightly more complex projects will cause a lot of pitfalls in the later stage. Therefore, bootstrap was used as the front-end CSS framework, and components such as modal were also used extensively to make pop-up windows.

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

1. Open the bootstrap.js source code to find the modal component code block, in Modal Add drag and drop code implementation under the .DEFAULTS code block.

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

After completing the above operation, directly introduce the source code js just modified to the page, and it can already support dragging very well. , and the entire dragging 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 it. Front-end automation tools such as gulp and webpack are used 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: The source code of the bootstrap 4.0 version does not have much modification to the modal component compared to the 3.x version. The above method can also be adopted. Including centering the modal, you can also modify the source code to complete it.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed interpretation of page life cycle in WeChat mini program (detailed tutorial)

pace.js and NProgress .js How to use the loading progress plug-in (detailed tutorial)

About the App life cycle in the WeChat applet (detailed tutorial)

in jQuery About the usage of NProgress.js loading progress plug-in

The above is the detailed content of Detailed introduction to adding drag and drop function to Modal in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!