bootstrap如何拖拽组件


本文摘自PHP中文网,作者爱喝马黛茶的安东尼,侵删。

步骤(基于3.3.4或更高的3.x版本):

1.打开bootstrap.js源代码找到modal组件代码块,在Modal.DEFAULTS代码块下加入拖拽代码实现。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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 () {

 $('body').off("mousemove");

 });

}

相关推荐:《bootstrap入门教程》

阅读剩余部分

相关阅读 >>

bootstrap是js类库么

bootstrap对于后端工程师重要么

如何去掉bootstrap模态框的遮罩层

bootstrap是什么意思啊

bootstrap3.0是哪一年推出的

详解bootstrap中的辅助类

bootstrap模态框怎么关闭

bootstrap怎么设置面板大小

bootstrap分页表格插件使用教程

bootstrap可以做小程序吗

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...