AI 助理
备案控制台
开发者社区 云计算 文章 正文

div自由拖动（pc）

2023-09-15 33
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： div自由拖动（pc） 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js--div自由拖动（在body可以自由拖动）</title>
    <style>
      .mydiv {
        position: fixed;
        width: 400px;
        height: 400px;
        background-color: blue;
        filter: Alpha(opacity=50);
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div id="drag" class="mydiv" style="left:0px;top: 20px;"></div>
    <script>
      var posX;
      var posY;
      fdrag = document.getElementById("drag");
      fdrag.onmousedown = function(e) {
        posX = event.x - fdrag.offsetLeft; //获得横坐标x
        posY = event.y - fdrag.offsetTop; //获得纵坐标y
        document.onmousemove = mousemove; //调用函数，只要一直按着按钮就能一直调用
      }
      document.onmouseup = function() {
        document.onmousemove = null; //鼠标举起，停止
      }
      function mousemove(ev) {
        if (ev == null) ev = window.event; //IE
        fdrag.style.left = (ev.clientX - posX) + "px";
        fdrag.style.top = (ev.clientY - posY) + "px";
      }
    </script>
  </body>
</html>
兜里只有三分钱~
目录
相关文章
最好zzz
|
22天前
|
编解码 UED
Qt侧边栏的动态切换：隐藏与显示技术详解
在现代用户界面设计中，侧边栏（Sidebar）是一个常见的组件，它为用户提供了导航和工具面板的功能。在某些应用场景下，我们可能需要动态地隐藏或显示侧边栏，以优化界面布局或提供更灵活的用户体验。本文将分享如何在Qt框架下实现侧边栏的隐藏与呈现，包括技术细节和代码示例。
最好zzz
89 3
长沙红胖子Qt
Qml实用技巧：在可视元素之前半透明覆盖一个可视元素，阻止鼠标透（界面）传（防止点击到被遮挡的按钮）
Qml实用技巧：在可视元素之前半透明覆盖一个可视元素，阻止鼠标透（界面）传（防止点击到被遮挡的按钮）
长沙红胖子Qt
664 0
Qml实用技巧：在可视元素之前半透明覆盖一个可视元素，阻止鼠标透（界面）传（防止点击到被遮挡的按钮）
朝阳39
|
5月前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
朝阳39
126 4
xiaohua616
|
7月前
|
小程序 前端开发 Android开发
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)
xiaohua616
494 1
GIS技术杂谈
Three.js开发：修改默认鼠标操控
Three.js开发：修改默认鼠标操控
GIS技术杂谈
217 0
JYeontu
|
前端开发 算法
怎么写一个可以鼠标控制旋转的div？
怎么写一个可以鼠标控制旋转的div？
JYeontu
89 0
编程乐趣
div层定位在网页右下角
div层定位在网页右下角
编程乐趣
59 0
长沙红胖子Qt
|
存储
PS实用技巧：用原始图片制作显示（正常状态）、鼠标悬浮(hover)、鼠标点击(pressed)的方法
PS实用技巧：用原始图片制作显示（正常状态）、鼠标悬浮(hover)、鼠标点击(pressed)的方法
长沙红胖子Qt
406 0
PS实用技巧：用原始图片制作显示（正常状态）、鼠标悬浮(hover)、鼠标点击(pressed)的方法
小周sir
jq移动端点击导航滚动对应位置并跟随联动效果
jq移动端点击导航滚动对应位置并跟随联动效果
小周sir
502 0
jq移动端点击导航滚动对应位置并跟随联动效果
范东洋
|
移动开发 Android开发 iOS开发
ReactNative切换Tab改变状态栏
Ready 现在大多数的ReactNative使用的路由都是react navigation.本示例就以react-navigation为例.解决其中遇到有需要切换tab来改变顶部状态栏字体以及背景色的需求 Go only have a single line of code componentDidMount() { this.
范东洋
1397 0