JavaScript原生实现HTML元素8方位拉伸拖拽

最新推荐文章于 2022-03-26 13:53:45 发布

bugNotBug

最新推荐文章于 2022-03-26 13:53:45 发布

阅读量713

点赞数 1

分类专栏： javascript 文章标签： javascript html vue

本文链接：https://blog.csdn.net/codebooks/article/details/107310747

版权

实现思路

拖拽元素（窗口）的实现很简单，在此不过多阐述，主要是选中元素，计算相对位置，然后将事件聚焦到待拖动的元素里面，计算移动的距离，应用到元素的CSS样式上，最后释放事件就可以了。
8方位的拉伸，网上现在先行的比较流行的代码是在一个DIV里面添加8个DIV以确定方位角，（但是这种方法真的是low爆了）完全不符合现行的模块化开发思路。（我总不能为了做个拉伸，还得在里面添加8个无用的DIV吧）所以，最好的方式，就是鼠标到元素（窗口）的指定位置，就能变换光标样式，（就和你在window里面拉动窗口一样）这样就必然会使用到mousemove事件，所以只要能确定元素的X/Y向偏移和元素自身的长宽，这个问题就很好解决了。
对于拉伸而言，方位检测一旦完成，拉伸就很好做了，和拖拽的思路基本一致，拖拽是改变元素的top/left值，而拉伸改变的是height/width/top/left的值罢了。

代码实现

<html>
  <head>
  </head>
  <body>
    <div id="main" style="width: 200px; height: 200px; background: #cccccc;"></div>
    <script>
      const el = document.querySelector('#main')
      el.style.position = 'absolute'
      el.style.top = '100px'
      el.style.left = '100px'
      el.style.zIndex = "99"
      const accuracy = 10
      const minWidth = 100
      const minHeight = 100
      el.onmousemove = (event) => {
   
        const x = event.clientX
        const y = event.clientY
        const topYUpperLimit = el.offsetTop + accuracy, topYLowerLimit = el.offsetTop
        const bottomYUpperLimit = el.offsetTop + el.clientHeight, bottomYLowerLimit = el.offsetTop + el.clientHeight - accuracy
        const leftXUpperLimit = el.offsetLeft + accuracy, leftXLowerLimit = el.offsetLeft
        const rightXUpperLimit = el.offsetLeft + el.clientWidth, rightXLowerLimit = el.offsetLeft + el.clientWidth - accuracy
        const CENTER = 0, LEFTTOP = 1, TOP = 2, RIGHTTOP = 3, RIGHT = 4, RIGHTBOTTOM = 5, BOTTOM = 6, LEFTBOTTOM = 7, LEFT = 8
        const checkWindowSize = (el) => {
   
          if

最低0.47元/天解锁文章

bugNotBug

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript原生实现HTML元素8方位拉伸拖拽

JavaScript原生实现HTML元素8方位拉伸拖拽实现思路代码实现实现思路拖拽元素（窗口）的实现很简单，在此不过多阐述，主要是选中元素，计算相对位置，然后将事件聚焦到待拖动的元素里面，计算移动的距离，应用到元素的CSS样式上，最后释放事件就可以了。8方位的拉伸，网上现在先行的比较流行的代码是在一个DIV里面添加8个DIV以确定方位角，（但是这种方法真的是low爆了）完全不符合现行的模块化开发思路。（我总不能为了做个拉伸，还得在里面添加8个无用的DIV吧）所以，最好的方式，就是鼠标到元素（窗口）的指
复制链接

扫一扫