使用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>
相关推荐
B站计算机毕业设计之家几秒前
Python手势识别检测系统 基于MediaPipe的改进SSD算法 opencv+mediapipe 深度学习 大数据 (建议收藏)✅
python·深度学习·opencv·计算机视觉·1024程序员节
liusheng39 分钟前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪44 分钟前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能1 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost1 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu1 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程
云中雾丽1 小时前
react-checkbox的封装
前端
乐园游梦记1 小时前
告别Ctrl+F5!解决VUE生产环境缓存更新的终极方案
前端
王哈哈^_^1 小时前
PyTorch vs TensorFlow:从入门到落地的全方位对比
人工智能·pytorch·python·深度学习·计算机视觉·tensorflow·1024程序员节