原生JS实现拖拽效果

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

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

鼠标按下 onmousedown
鼠标移动 onmousemove
鼠标抬起 onmouseup

html

<div id=\"login\" class=\"login\"><!-- 点击title拖拽 --><div id=\"title\" class=\"login-title\">登录会员<!-- title end --><span><a id=\"closeBtn\" href=\"javascript:void(0);\" class=\"close-login\">关闭</a></span></div><div class=\"login-input-content\"><div class=\"login-input\"><label>用户名：</label><input type=\"text\" placeholder=\"请输入用户名\" name=\"info[username]\" id=\"username\" class=\"list-input\"></div><div class=\"login-input\"><label>登录密码：</label><input type=\"password\" placeholder=\"请输入登录密码\" name=\"info[password]\" id=\"password\" class=\"list-input\"></div></div><div id=\"loginBtn\" class=\"login-button\"><a href=\"javascript:void(0);\" id=\"login-button-submit\">登录会员</a></div></div>

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部分

<style>*{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;}</style>

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: