<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
</style>
<script>
window.onload = function(){
* 拖拽
* 1 当鼠标在被拖拽元素移动时 开始拖拽 onmousedown
* 2 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
* 3 当鼠标松开时，被 拖拽元素固定在当前位置 onmouseup
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
// 开启box1
drag(box1);
// 开启box2
drag(box2);
* 提取 一个专门用来设置拖拽的函数
* 参数: 开启拖拽的元素
function drag(obj){
// 1 当鼠标在被拖拽元素移动时 开始拖拽 onmousedown
obj.onmousedown = function(event){
// 设置 obj 捕获所有鼠标按下的事件
// setCapture() 只有ie 支持 在 chrome调用 会报错
// if(obj.setCapture){
// obj.setCapture();
obj.setCapture && obj.setCapture();
event = event ||window.event;
// div 的偏移量 鼠标.clientX - 元素.offsetLeft
// div 的偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document 绑定一个onmousemove 事件
document.onmousemove = function(event){
// 2 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
event = event ||window.event;
// 获取鼠标坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
var objW = obj.offsetWidth;
var objH = obj.offsetHeight;
var docW = document.documentElement.clientWidth;
var docH = document.documentElement.clientHeight;
// 限制临界点 左边
if( left < 0){
left = 0;
if(left > docW - objW){
left = docW - objw
// 限制临界点 顶部
if( top < 0){
top = 0;
if( top > docH - objH){
top = docH - objH;
// 修改box的位置
obj.style.left = left + 'px';
obj.style.top = top + 'px';
// 为元素绑定一个鼠标松开事件
document.onmouseup = function(){
// 3 当鼠标松开时，被 拖拽元素固定在当前位置 onmouseup
// 取消document的onmousemove 事件
document.onmousemove = null;
// 取消document的onmouseup 事件
document.onmouseup = null;
// 当鼠标松开时 取消对事件的捕获
// if(obj.releaseCapture){
// obj.releaseCapture();
// }
obj.releaseCapture && obj.releaseCapture();
* 当 拖拽一个网页中的内容时， 浏览器会默认 去 搜索引擎中搜索
* 此时会导致拖拽功能的异常
* 如果不希望发生这个行为, 则可以 return false 来取消默认行为
* 对 ie8 不起作用
return false;
</script>
</head>
我是一段文字
<div id="box1"> </div>
<div id="box2"> </div>
</body>
</html>
js实现模态窗口的拖拽功能
拖拽的主要实现思想 分为三步： （1）用户在拖放元素上按下鼠标，拖放开始 login.addEventListener("mousedown",drag,false); （2）用户在拖放元素上移动鼠标，拖放元素在页面中进行拖动 document.addEventListener("mousemove",move,false); （3）用户鼠标一开拖放元素，拖放行为结束 document.addEventListener("mouseup",up,false);
