LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript实现拖动div盒子

admin
2024年11月22日 12:15 本文热度 1246
:JavaScript实现拖动div盒子
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>


<body>
  <div style="width: 200px;height: 200px;background-color: blue;position: absolute;"></div>
  <script>
  let div = document.querySelector('div');
  let flag = false
  div.addEventListener('mousedown', (e) => {
      flag = true
      let x = e.offsetX;
      let y = e.offsetY;
      document.addEventListener('mousemove', (e) => {
        let _h = window.innerHeight - div.offsetHeight 
        let _w = window.innerWidth - div.offsetWidth
        let div_left = e.clientX - x;
        let div_top = e.clientY - y;
        div_top = Math.min(Math.max(0,div_top),_h)
        div_left = Math.min(Math.max(0,div_left),_w)
        if(flag){
        div.style.top = div_top + 'px';
        div.style.left = div_left + 'px';
      }
      });
  });
  div.addEventListener('mouseup',()=>{
      flag = false
  })
</script>
</body>
</html>

该文章在 2024/11/22 15:51:04 编辑过
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved