js拖拽页面元素（包含垂直居中元素）_实现元素剧中任意拖拽-CSDN博客

本文链接：https://blog.csdn.net/dizuncainiao/article/details/78029942

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#box{width: 300px; height: 300px; position: absolute;background: rgba(0,0,0,.5); cursor: move;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="box">
<strong>要点：</strong><br />
<p>1.拖拽元素设为相绝定位，且top和left值必须为整数值</p>
</div>
<script type="text/javascript">


//拖拽
function drag(parm){
//js动态居中元素
var left = ($(window).width()-$(parm).width())/2,
top = ($(window).height()-$(parm).height())/2;
$(parm).css({'top':top+'px','left':left+'px'});

$(parm).on('mousedown',function(e){
var x = $(this).offset(),
//获取元素的top和left值
oTop = x.top,
oLeft = x.left,
//获取当前点击时指针的坐标
mouseX = e.pageX,
mouseY = e.pageY;
   $(document).on('mousemove',function(e){
    //计算公式：（元素的初始top值）+（指针的实时坐标-指针的初始坐标）
    var m_1 = oLeft+(e.pageX-mouseX) , m_2 = oTop+(e.pageY-mouseY);
    $(parm).css({'top':m_2+'px','left':m_1+'px'});
   });
})
$(parm).on('mouseup',function(){
$(document).unbind('mousemove');
})
}
drag('#box');
</script>
</body>
</html>