使用JS写一个用鼠标拖动DIV到任意地方

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
       div{
        width:200px;
        height:200px;
        background:red;
       } 
</style>
</head>
<body>
  <div id="oblong"></div>
</body>
   <script type="text/javascript">
     document.getElementById('oblong').οnmοusedοwn=function(){
      var oblong=document.getElementById("oblong");
      oblong.style.cursor="pointer";
      document.οnmοusemοve=function(){
      var x=event.clientX;
    var y=event.clientY;
       oblong.style.position='fixed';
    oblong.style.left=(x-100)+'px';
    oblong.style.top=(y-100)+'px';
    }
     }
     document.getElementById("oblong").οnmοuseup=function(){


         document.οnmοusemοve=false;
     }
   </script>
</html>
相关推荐
索西引擎10 分钟前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮38 分钟前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗40 分钟前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js
OpenTiny社区44 分钟前
TinyEngine 2.11版本发布:AI 进一步融入画布,Vue 工程可一键转DSL
前端·vue.js·github
小雪_Snow1 小时前
JavaScript 中的三种常用事件
开发语言·前端·javascript
Hyyy1 小时前
Electron-Vite是什么,和Vite有什么区别
前端·面试
蓝胖子酱1 小时前
在 Electron 中用 electron-store 实现加密存储与自定义格式文件
前端·javascript·数据库
虚焦像素_1 小时前
海康 Web 插件版接入指南:用法与注意事项
前端
虚焦像素_1 小时前
海康 Web 无插件版接入指南:用法与注意事项
前端
To_OC2 小时前
LC 22 括号生成:刷完这道题,我终于搞懂回溯剪枝了
javascript·算法·leetcode