首页 > 其他分享 >只允许在指定范围里拖拽

只允许在指定范围里拖拽

时间:2023-02-14 15:24:10浏览次数:32  
标签:oDiv top 指定 let 允许 div 拖拽 Math left


废话不多说代码如下

我的查看代码
let oDiv = document.querySelector('div')
    let flag = false;
    oDiv.addEventListener('mousedown',(e)=>{
        let x = e.offsetX;
        let y = e.offsetY;
        flag = true;
        document.addEventListener('mousemove',(event)=>{
            let _w = window.innerWidth - oDiv.offsetWidth;
            let _h = window.innerHeight - oDiv.offsetHeight;
            let div_left = event.clientX - x;
            let div_top = event.clientY - y;
            div_top = Math.min(Math.max(0,div_top),_h);
            div_left = Math.min(Math.max(0,div_left),_w);
            if(flag){
              oDiv.style.left = div_left + 'px';
              oDiv.style.top = div_top + 'px';
            }
            
        })
    })
    oDiv.addEventListener('mouseup',()=>{
      flag = false;
    })

标签:oDiv,top,指定,let,允许,div,拖拽,Math,left
From: https://www.cnblogs.com/taotao168/p/17119677.html

相关文章

  • SVN提交到服务器退回至指定版本(撤销操作)
    一、撤销已提交内容如果不小心把修改错误的文件提交到服务器上去了可对其进行复原(指定单个文件撤销)解决方法:查看修改的日志查看错误提交的文件 可以查看到这个文......
  • MySQL 替换和截取指定位置字符串
    1.情景展示返回服务器的身份证号需要进行加密:只保留前4位和后3位,中间使用*代替,如何实现? 2.场景分析需要用到的函数有:IFNULL(),IF(),LENGTH(),REPLACE(),SUBSTR()......
  • spark的DataFrame的schema模式:读时模式, 指定模式
    读时模式valpath="/Volumes/Data/BigData_code/data/"//读取json生成dataframevaldf=spark.read.format("json").load(path+"flight-data/json/2015-......
  • GitLab CICD Day 07 - 指定分支
    新建dev分支only限制执行分支stages:-testing#stage编排-build-deployrun_test:#Jobstage:testingonly:......
  • 为什么leveldb/rocksdb只允许一个线程修改memtable?
    leveldb/rocksdb采用deque控制多线程只允许一个线程修改memtable,是由于memtable不存在读-写冲突(采用MVCC,保证Sequence一定不同,memtable的key就一定不同,update/delete/ins......
  • 获取指定网卡的ip
    #!/usr/bin/envpython#-*-coding:utf-8-*-importsocketimportfcntlimportstructdefget_ip_address(ifname):s=socket.socket(socket.AF_INET,sock......
  • java计算指定日期的上个月
    文章目录​​java计算指定日期的上个月​​​​Calendar类​​​​API​​​​代码实现​​java计算指定日期的上个月Calendar类    Calendar类是一个抽象类,可以为在某......
  • VS 指定JS出现智能提示
    原文地址:https://www.cnblogs.com/zuqing/p/4862142.html   大家都知道,在Asp.netMVC中,引入了CSS,JS捆绑优化这个好东东。但是,你会发现,运用了这个捆绑优化后,或者引......
  • 实现表格拖拽
    使用sortable.js实现官方网站:http://www.sortablejs.com/中文文档:https://www.itxst.com/sortablejs/neuinffi.htmlyarnaddsortablejsimportSortablefrom"sort......
  • vue 甘特图 一行多条任务 可拖拽
    1、安装highchartsnpminstallhighcharts--save2、页面引用//引入importHighchartsfrom'highcharts/highcharts-gantt.src.js'//引入拖拽importfactoryf......