使用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>
相关推荐
落魄江湖行几秒前
入门篇八 Nuxt4页面元信息与 SEO:让搜索引擎爱上你的网站
前端·typescript·seo·nuxt4
code_pgf几秒前
Transformer 原理讲解及可视化算子操作
人工智能·深度学习·transformer
碑 一1 分钟前
视频分割VisTR算法
人工智能·深度学习·计算机视觉
╰つ栺尖篴夢ゞ2 分钟前
Web之深入解析Cookie的安全防御与跨域实践
前端·安全·存储·cookie·跨域
木斯佳6 分钟前
前端八股文面经大全:腾讯前端一面(2026-04-04)·深度解析
前端·ai·鉴权·monorepo
code_Bo8 分钟前
kiro生成小程序商业案例
前端·微信小程序·小程序·云开发
yellowbuff9 分钟前
为什么你的 0.01 秒倒计时看起来一卡一卡的?
前端
onebyte8bits12 分钟前
NestJS 系列教程(十八):文件上传与对象存储架构(Multer + S3/OSS + 访问控制)
前端·架构·node.js·状态模式·nestjs
Ruihong14 分钟前
放弃 Vue3 传统 <script>!我的 VuReact 编译器做了一次清醒取舍
前端·vue.js
weixin_4561648315 分钟前
vue3 父组件向子组件传参
前端