gpt4 book ai didi

原生JS实现拖拽效果

转载 作者:qq735679552 更新时间:2022-09-27 22:32:09 27 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章原生JS实现拖拽效果由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

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

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

html 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< 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 >

原生JS实现拖拽效果

JS 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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部分 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.

原文链接:https://blog.csdn.net/weixin_47300932/article/details/110405164 。

最后此篇关于原生JS实现拖拽效果的文章就讲到这里了,如果你想了解更多关于原生JS实现拖拽效果的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com