使用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>
相关推荐
sen_shan15 小时前
《Vue项目开发实战》第八章:组件封装--vxeGrid
前端·javascript·vue.js
五点六六六15 小时前
双非同学校招笔记——离开字节入职小📕
前端·面试·程序员
IT_陈寒15 小时前
Redis实战:5个高频应用场景下的性能优化技巧,让你的QPS提升50%
前端·人工智能·后端
2***574215 小时前
Vue项目国际化实践
前端·javascript·vue.js
我也爱吃馄饨15 小时前
写的webpack插件如何适配CommonJs项目和EsModule项目
java·前端·webpack
全马必破三15 小时前
HTML常考知识点
前端·html
3秒一个大15 小时前
JavaScript 作用域:从执行机制到块级作用域的演进
javascript
大佬,救命!!!15 小时前
更换适配python版本直接进行机器学习深度学习等相关环境配置(非仿真环境)
人工智能·python·深度学习·机器学习·学习笔记·详细配置
OLong15 小时前
忘掉"发请求",声明你要的数据:TanStack Query 带来的思维革命
前端
琦遇15 小时前
Vue3使用vuedraggable实现拖拽排序
前端