首先我做的bootstrap的拖拽功能是靠插件jquery-ui实现的,所以使用前必须要先在jquery.js之后引入JS,
大概是这样的顺序
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="//cdn.bootcss.com/jqueryui/1.11.4/jquery-ui.js"></script> // 完成拖拽功能
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script> // 完成Modal
在JS中的绑定方法
$(".modal").each(function(){
$(this).draggable({
handle: ".modal-header" // 只能点击头部拖动
});
$(this).css("overflow", "hidden"); // 防止出现滚动条,出现的话,你会把滚动条一起拖着走的
});
也可以绑定在弹出事件上
$(document).on("show.bs.modal", ".modal", function(){
$(this).draggable();
//直接这样写,点击整个弹窗的任意部位都能拖动
});
bootstrap modal 的四个常用事件:
事件 | 描述 | 示例 |
---|---|---|
show.bs.modal | 在调用 show 方法后触发。 | $("#identifier").on('show.bs.modal', function(){//do sth. }); |
show.bs.modal | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 | $("#identifier").on('shown.bs.modal', function(){//do sth. }); |
hide.bs.modal | 当调用 hide 方法时触发。 | $("#identifier").on('hide.bs.modal', function(){//do sth. }); |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $("#identifier").on('hidden.bs.modal', function(){//do sth. }); |