Bootstrap Modal adds drag-and-drop method example

This article mainly introduces the detailed method of adding drag and drop to Bootstrap Modal. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

There are many drag-and-drop implementations for Bootstrap Modal on the Internet, but many of the codes look relatively complicated and may not be very encapsulated. Some even use the drag-and-drop function of jquery ui. These are not mine. What I want, in fact, I was adding drag and drop functionality to Bootstrap Modal during the Spring Festival of 2017, and a 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 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()
    //......省略
}

After completing the above operation, directly Introducing the newly modified source code js can already support drag and drop well on the page, 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 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 modifications 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.

Related recommendations:

JS implementation of simple drag-and-drop shopping cart function

TP5 integrates webuploader to implement preview drag-and-drop search Delete

Example to explain how jQuery uses the zTree plug-in to implement drag-and-drop functionality

The above is the detailed content of Bootstrap Modal adds drag-and-drop method example. For more information, please follow other related articles on the PHP Chinese website!