html5 原生拖拽,原生JS实现拖拽效果

这篇文章主要为大家详细介绍了原生JS实现拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下

想要让整个元素移动需要三个事件：

鼠标按下 onmousedown

鼠标移动 onmousemove

鼠标抬起 onmouseup

html

登录会员

关闭

用户名：

登录密码：

登录会员

JS

var login = document.querySelector('.login');//获取整个弹框的内容

var title = document.querySelector('#title');

title.addEventListener('mousedown',function(e){

//当按下鼠标的时候，获取到鼠标在拖拽盒子内的坐标

//鼠标在页面的坐标 - 大盒子距离浏览器左侧的距离

var x = e.pageX - login.offsetLeft;

var y = e.pageY - login.offsetTop;

//鼠标移动

document.addEventListener('mousemove',move);

function move(e){

//拖拽的盒子定位=鼠标在页面的坐标 - 鼠标在拖拽盒子的坐标

login.style.left = e.pageX - x + 'px';

login.style.top = e.pageY - y + 'px';

}

//当鼠标抬起的时候，将移动事件删除

document.addEventListener('mouseup',function(){

document.removeEventListener('mousemove',move);

})

})

CSS部分

*{

padding: 0px;

margin: 0px;

}

.login {

display: block;

width: 512px;

height: 280px;

position: fixed;

border: #ebebeb solid 1px;

left: 50%;

top: 50%;

background: #ffffff;

box-shadow: 0px 0px 20px #ddd;

z-index: 9999;

transform: translate(-50%, -50%);

}

.login-title {

width: 100%;

margin: 10px 0px 0px 0px;

text-align: center;

line-height: 40px;

height: 40px;

font-size: 18px;

position: relative;

cursor: move;

}

.login-input-content {

margin-top: 20px;

}

.login-button {

width: 50%;

margin: 30px auto 0px auto;

line-height: 40px;

font-size: 14px;

border: #ebebeb 1px solid;

text-align: center;

}

.login-bg {

display: none;

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: rgba(0, 0, 0, .3);

}

a {

text-decoration: none;

color: #000000;

}

.login-button a {

display: block;

}

.login-input input.list-input {

float: left;

line-height: 35px;

height: 35px;

width: 350px;

border: #ebebeb 1px solid;

text-indent: 5px;

}

.login-input {

overflow: hidden;

margin: 0px 0px 20px 0px;

}

.login-input label {

float: left;

width: 90px;

padding-right: 10px;

text-align: right;

line-height: 35px;

height: 35px;

font-size: 14px;

}

.login-title span {

position: absolute;

font-size: 12px;

right: -20px;

top: -30px;

background: #ffffff;

border: #ebebeb solid 1px;

width: 40px;

height: 40px;

border-radius: 20px;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持炫H5(xyhtml5.com)。