基于JQuery 改造bootstrap模态框拖动功能

看不爽现有的bootstrap拖动实现,自己也手痒,就自己写了一个拖动处理。

PS:其他实现拖动方法 http://www.gbtags.com/gb/rtreplayerpreview/230.htm 供参考


JQuery版本1.7.2

Bootstrap版本3.3.4

html代码(就是普通的模态框代码)

<div class="modal fade" id="modalID"  tabindex="-1" role="dialog" 
    aria-labelledby="myModal"  aria-hidden="true" >
    <div class="modal-dialog">
    	<div class="modal-content">
			<form method="POST" id="" action="" onSubmit="">
	    		<div class="modal-header popup_box_head_style">
	    			<button type="button" class="close popup_box_close_style" style="color:white"
	                data-dismiss="modal" aria-hidden="true">
	                  ×
	            	</button>
	    		 <div class="modal-footer popup_box_footer_style" style="text-align:center">
		           <button type="button" class="btn btn-default btn-lg" style="background-color:#4497f8;color:white;border:1px solid #4497f8"
	                    data-dismiss="modal">关闭
		            </button>
			</div>
			</form>
    	</div>
    </div>
</div>			

Js代码

/** 拖拽模态框*/
		var mouseStartPoint = {"left":0,"top":  0};
		var mouseEndPoint = {"left":0,"top":  0};
		var mouseDragDown = false;
		var oldP = {"left":0,"top":  0};
		var moveTartet ;
		$(document).ready(function(){
			$(document).on("mousedown",".modal-header",function(e){
				if($(e.target).hasClass("close"))//点关闭按钮不能移动对话框
					return;
				mouseDragDown = true;
				moveTartet = $(this).parent();
				mouseStartPoint = {"left":e.clientX,"top":  e.clientY};
				oldP = moveTartet.offset();
			});
			$(document).on("mouseup",function(e){
				mouseDragDown = false;
				moveTartet = undefined;
				mouseStartPoint = {"left":0,"top":  0};
				oldP = {"left":0,"top":  0};
			});
			$(document).on("mousemove",function(e){
				if(!mouseDragDown || moveTartet == undefined)return;
				var mousX = e.clientX;
				var mousY = e.clientY;
				if(mousX < 0)mousX = 0;
				if(mousY < 0)mousY = 25;
				mouseEndPoint = {"left":mousX,"top": mousY};
				var width = moveTartet.width();
				var height = moveTartet.height();
				mouseEndPoint.left = mouseEndPoint.left - (mouseStartPoint.left - oldP.left);//移动修正,更平滑
				mouseEndPoint.top = mouseEndPoint.top - (mouseStartPoint.top - oldP.top);
				moveTartet.offset(mouseEndPoint);
			});
		});

原理:

并没有什么鬼原理,就是简单的数学计算。


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值