bootstrap如何拖拽组件
文章标签
组件
步骤(基于3.3.4或更高的3.x版本):
1.打开bootstrap.js源代码找到modal组件代码块,在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 $(window).width() - $modalDialog.width()) { left = $(window).width() - $modalDialog.width(); } if (top $(window).height() - $modalDialog.height()) { top = $(window).height() - $modalDialog.height(); } $modalDialog.offset({ top: top, left: left }); }); }); $(document).on("mouseup mouseleave", function () { $('body').off("mousemove"); });}