使用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>
相关推荐
猫天意14 分钟前
YOLOv11魔改高效涨点 | 注意力篇 | 坐标注意力CoordAttention:将位置信息硬核嵌入通道,精准捕获长程空间依赖,即插即用,涨点神器!!!
开发语言·人工智能·深度学习·神经网络·yolo·目标检测·低光照增强
Surplusx22 分钟前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
小宇的天下43 分钟前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
LongJ_Sir1 小时前
Cesium--可拖拽气泡弹窗(Vue3版)
javascript
跟着珅聪学java1 小时前
JavaScript 中定义全局变量的教程
javascript
一只小bit2 小时前
Qt 文件:QFile 文件读写与管理教程
前端·c++·qt·gui
午安~婉2 小时前
整理知识点
前端·javascript·vue
向前V2 小时前
Flutter for OpenHarmony数独游戏App实战:底部导航栏
javascript·flutter·游戏
人道领域2 小时前
JavaWeb从入门到进阶(javaScript)
开发语言·javascript·ecmascript
军军君012 小时前
Three.js基础功能学习十二:常量与核心
前端·javascript·学习·3d·threejs·three·三维