标签：body document mouseEndPoint top bootstrap dragModal model 动态 left
<!-- 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>
标签：body,document,mouseEndPoint,top,bootstrap,dragModal,model,动态,left 来源： https://www.cnblogs.com/Arborblog/p/16104733.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。