<!-- saved from url=(0066)https://guguji5.github.io/bs-modal-dragable/bs-modal-dragable.html -->
<html><head><Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./bs-modal-dragable_files/jquery.js.下载"></script>
<script src="./bs-modal-dragable_files/bootstrap.js.下载"></script>
<link rel="stylesheet" type="text/css" href="./bs-modal-dragable_files/bootstrap.css">
<style type="text/css">
.select{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
.modal-header{
cursor:move;
}
</style>
</head>
<body class="modal-open select">
<div class="container-fluid">
<table class="table table-bordered">
<thead>
<tr><th>id</th>
<th>name</th>
<th>age</th>
<th>job</th>
</tr></thead>
<tbody>
<tr>
<td>1</td>
<td>guguji</td>
<td>26</td>
<td>developer</td>
</tr>
<tr>
<td>2</td>
<td>qinling</td>
<td>25</td>
<td>insurance saler</td>
</tr>
<tr>
<td>3</td>
<td>li ke</td>
<td>24</td>
<td>human reource</td>
</tr>
</tbody>
</table>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<a class="btn btn-primary btn-lg" href="https://github.com/guguji5/bs-modal-dragable">github项目</a>
<!-- Modal -->
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in"></div>
<div class="modal-dialog" style="top: 282px; left: 32px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
this is the modal-body areas
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script>
/** 拖拽模态框*/
var dragModal={
mouseStartPoint:{"left":0,"top": 0},
mouseEndPoint : {"left":0,"top": 0},
mouseDragDown : false,
basePoint : {"left":0,"top": 0},
moveTarget:null,
topleng:0
}
$(document).on("mousedown",".modal-header",function(e){
//webkit内核和火狐禁止文字被选中
$('body').addClass('select')
//ie浏览器禁止文字选中
document.body.onselectstart=document.body.ondrag=function(){
return false;
}
if($(e.target).hasClass("close"))//点关闭按钮不能移动对话框
return;
dragModal.mouseDragDown = true;
dragModal.moveTarget = $(this).parent().parent();
dragModal.mouseStartPoint = {"left":e.clientX,"top": e.pageY};
dragModal.basePoint = dragModal.moveTarget.offset();
dragModal.topLeng=e.pageY-e.clientY;
});
$(document).on("mouseup",function(e){
dragModal.mouseDragDown = false;
dragModal.moveTarget = undefined;
dragModal.mouseStartPoint = {"left":0,"top": 0};
dragModal.basePoint = {"left":0,"top": 0};
});
$(document).on("mousemove",function(e){
if(!dragModal.mouseDragDown || dragModal.moveTarget == undefined)return;
var mousX = e.clientX;
var mousY = e.pageY;
if(mousX < 0)mousX = 0;
if(mousY < 0)mousY = 25;
dragModal.mouseEndPoint = {"left":mousX,"top": mousY};
var width = dragModal.moveTarget.width();
var height = dragModal.moveTarget.height();
var clientWidth=document.body.clientWidth
var clientHeight=document.body.clientHeight;
if(dragModal.mouseEndPoint.left<dragModal.mouseStartPoint.left - dragModal.basePoint.left){
dragModal.mouseEndPoint.left=0;
}
else if(dragModal.mouseEndPoint.left>=clientWidth-width+dragModal.mouseStartPoint.left - dragModal.basePoint.left){
dragModal.mouseEndPoint.left=clientWidth-width-38;
}else{
dragModal.mouseEndPoint.left =dragModal.mouseEndPoint.left-(dragModal.mouseStartPoint.left - dragModal.basePoint.left);//移动修正，更平滑
}
if(dragModal.mouseEndPoint.top-(dragModal.mouseStartPoint.top - dragModal.basePoint.top)<dragModal.topLeng){
dragModal.mouseEndPoint.top=dragModal.topLeng;
}else if(dragModal.mouseEndPoint.top-dragModal.topLeng>clientHeight-height+dragModal.mouseStartPoint.top - dragModal.basePoint.top){
dragModal.mouseEndPoint.top=clientHeight-height-38+dragModal.topLeng;
}
else{
dragModal.mouseEndPoint.top = dragModal.mouseEndPoint.top - (dragModal.mouseStartPoint.top - dragModal.basePoint.top);
}
dragModal.moveTarget.offset(dragModal.mouseEndPoint);
});
$(document).on('hidden.bs.modal','.modal',function(e){
$('.modal-dialog').css({'top': '0px','left': '0px'})
$('body').removeClass('select')
document.body.onselectstart=document.body.ondrag=null;
})
</script>
<div class="xl-chrome-ext-bar" id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
<div class="xl-chrome-ext-bar__logo"></div>
<a id="xl_chrome_ext_download" href="javascript:;" class="xl-chrome-ext-bar__option">下载视频</a>
<a id="xl_chrome_ext_close" href="javascript:;" class="xl-chrome-ext-bar__close"></a>
</div></body></html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
