使用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>
相关推荐
玄同7658 分钟前
Python 流程控制:LLM 批量推理与 API 限流处理
服务器·人工智能·python·深度学习·自然语言处理·数据挖掘·知识图谱
IT_陈寒14 分钟前
Vue3性能优化实战:7个被低估的Composition API技巧让渲染提速40%
前端·人工智能·后端
颖风船25 分钟前
膨胀腐蚀及底层实践,拒绝opencv,matlab等方式
前端·opencv·matlab
俩毛豆29 分钟前
【毛豆工具集】【文件】【目录操作】生成沙盒目录
前端·javascript·鸿蒙
霁月的小屋33 分钟前
从Vue3与Vite的区别切入:详解Props校验与组件实例
开发语言·前端·javascript·vue.js
橙汁味的风33 分钟前
4神经网络框架
人工智能·深度学习·神经网络
Java后端的Ai之路41 分钟前
【神经网络基础】-从生物神经元到人工神经元
人工智能·深度学习·神经网络·机器学习
美酒没故事°1 小时前
vue3+element实现复杂表单选中回显
前端·javascript·vue.js
小笔学长1 小时前
Mixin 模式:灵活组合对象功能
开发语言·javascript·项目实战·前端开发·mixin模式