我们在一些网站中都可以看到很时尚炫酷的图片拖拽，当然这些操作用javascript就可以实现，那么我们今天就来讲一下如何使用javascript实现拖拽功能的，没有了解过javascript实现拖拽功能的或者感兴趣的我们一起来看看吧！
需要看的问题：
1、怎样在网页中实现拖曳功能。
2、document.documentelement与document.body的区别。
document.documentelement.clientwidth指整个html文档的宽度，document.body.clientwidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentelement)和console.log(document.body)进行测试。
3、getboundingclientrect().left与offsetleft的区别。
（1）getboundingclientrect()用于获取元素的left、top、right、bottom。
（2）offset获取相对于父级的left和top。getboundingclientrect()获取相对于窗口的left、top、right、bottom。
4、e.clientx指的是鼠标点相对于窗口的坐标。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹窗</title>
<style type="text/css">
#mask {
position: fixed;
left:0;
top:0;
width:100%;
height: 100%;
background-color: hsla(250,100%,50%,0.6);
display: none;
}
#popbox {
position: absolute;
background-color: #fff;
width:200px;
height: 200px;
/*left:50%;
top:50%;*/
/*margin-top: -100px;
margin-left: -100px;*/
}
</style>
</head>
<body>
<button id="clickbtn">点击</button>
<p id="mask">
<p id="popbox"></p>
</p>
<script type="text/javascript">
var clickbtn = document.getelementbyid("clickbtn");
var popbox = document.getelementbyid("popbox")
var mask = document.getelementbyid("mask");
clickbtn.onclick = function() {
mask.style.display = "block";
popbox.style.left = (document.documentelement.clientwidth - popbox.offsetwidth)/2 + "px";
popbox.style.top = (document.documentelement.clientheight - popbox.offsetheight)/2 + "px";
}
popbox.onclick = function(e) {
var e = e || window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
e.cancelbubble = true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
}
mask.onclick = function() {
mask.style.display = "none";
}
//拖拽 mousedown->mousemove->mouseup
popbox.onmousedown = function(e) {
var e = e || window.event;
var pos = popbox.getboundingclientrect();//getboundingclientrect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getboundingclientrect()获取相对于窗口的left、top、right、bottom。
var ox = e.clientx - pos.left;//clientx指相对于窗口的坐标。
var oy = e.clienty - pos.top;
document.onmousemove = function(e) {
var e = e || window.event;
var oleft = e.clientx - ox;
var otop = e.clienty - oy;
popbox.style.left = oleft + "px";
popbox.style.top = otop + "px";
if (oleft<0) {
popbox.style.left = 0 + "px";
};
if (oleft>document.documentelement.clientwidth - popbox.offsetwidth) {
popbox.style.left = document.documentelement.clientwidth - popbox.offsetwidth + "px";//document.documentelement.clientwidth指整个html文档的宽度，document.body.clientwidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentelement)和console.log(document.body)进行测试。
}
if (otop<0) {
popbox.style.top = 0 + "px";
};
if (otop > document.documentelement.clientheight - popbox.offsetheight) {
popbox.style.top = document.documentelement.clientheight - popbox.offsetheight + "px";
}
}
popbox.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
</body>
</html>
结合代码分析，我感觉给了源码自己尝试的去删除、修改，这样的学习进步的很快而且还不会容易忘记。
相关推荐：
js控制文件拖拽及获取拖拽内容
以上就是利用js实现时尚的拖拽功能的详细内容。