原生JS 实现页面元素的拖动 拖拽

原生JS 实现页面元素的拖动 拖拽原生JS实现页面元素的拖拽1.

大家好,又见面了,我是你们的朋友全栈君。

1 . 实现原理

要实现页面元素的拖动,其原理就是根据鼠标的移动实时的更改元素的left 和 top值(当然元素肯定是要做绝对定位的),那么就达到我们要的效果了呀!

鼠标的位置是可以通过 e.clientX 获取的,通过获取的值减去鼠标和目标元素之间的偏移量,就是我们的 left 值了呗, top值是同理的,不过记住要设置界限哟,不然跑出去了。

代码我尽量写了注释,如果还是有什么不懂的,直接评论就好了,我会尽快回复的。

2 . 实例展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> * { 
     padding: 0; margin: 0; } .move { 
     height: 100px; width: 100px; background: #41ffce; position: absolute; top: 50px; left: 50px; } .move:hover{ 
     cursor: pointer; } </style>
</head>

<body>
    <div class="move"></div>

    <script> window.onload = function () { 
     // 目标元素 var move = document.getElementsByClassName("move")[0]; // 鼠标按下 move.onmousedown = function (e) { 
     // 获取事件对象 var e_down = e || window.event; // 计算鼠标点击的位置 和 目标元素之间 的偏移量 var x = e_down.clientX - e_down.target.offsetLeft; var y = e_down.clientY - e_down.target.offsetTop; // 我们想要拖拽元素,其实就是根据鼠标的移动实时的更改元素的left 和 top值 // 鼠标的位置是可以通过e.clientX 获取的,然后减去x 不就是我们的left值了 //鼠标移动,肯定是在按住的情况下移动的嘛 document.onmousemove = function(e){ 
     var e_move = e || window.event; left_ = e_move.clientX - x; top_ = e_move.clientY - y; // 对left_和top_添加界限 if(left_ < 0){ 
     left_ = 0 }else if(left_ > document.documentElement.clientWidth - e_down.target.offsetWidth){ 
     left_ = document.documentElement.clientWidth - e_down.target.offsetWidth } if(top_ < 0){ 
     top_ = 0 }else if(top_ > document.documentElement.clientHeight - e_down.target.offsetHeight){ 
     top_ = document.documentElement.clientHeight - e_down.target.offsetHeight } // move.setAttribute("style","top:"+top_+'px'+";left:"+left_+"px") move.style.left = left_+'px'; move.style.top = top_+'px'; } // 释放鼠标 move.onmouseup = function(){ 
     document.onmousemove = null } } } </script>
</body>
</html>

希望能够帮助到大家,有什么问题可以 直接评论即可,如果不够详细的话也可以说,我会及时回复的。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150641.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux&Docker&Mysql&GitWin常用命令

    Linux&Docker&Mysql&GitWin常用命令苦于有时候某个命令真的想不起,又得百度,干脆以后操作linux时,打开博文直接查询多爽。基于安装rabbitmq时,某个命令不会,写下的,后面再继续补充1.基本命令:删除文件:rm -rf + 名称查看当前路径: pwd复制文件:cp [ -r ] 源文件或目录 目标文件或目录复制多个文件:cp /home/usr/dir/{file1,file2,file3,file4} /home/usr/destination/显示解压文件的过程 tar -zxvf 文件名称 不显

  • 学习JavaScript这一篇就够了

    学习JavaScript这一篇就够了目录第一章JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3

  • R语言软件安装教程「建议收藏」

    R语言软件安装教程「建议收藏」安装R和Rstuido软件R语言是用于统计分析,图形表示和报告的编程语言和软件环境;Rstudio是编辑、运行R语言的最为理想的工具之一。1、官网下载R安装包下载地址为:https://cran.r-project.org进入链接,如下图所示,在页面顶部提供了三个下载链接,分别对应三种操作系统:Windows、Mac和Linux。请选择自己操作系统对应的链接,接下来我将以windows为例给大家展示安装过程。接下来单击【DownloadRforWindows】——>【base】—

  • 大约session_cached_cursors在不同的db在默认不同的版本号

    大约session_cached_cursors在不同的db在默认不同的版本号

  • DB2的JDBC连接

    DB2的JDBC连接

  • 怎么新建pytest的ini文件_python读取ini配置文件

    怎么新建pytest的ini文件_python读取ini配置文件前言pytest配置文件可以改变pytest的运行方式,它是一个固定的文件pytest.ini文件,读取配置信息,按指定的方式去运行查看pytest.ini的配置选项pytest-h找到以下

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号