div拖拽左右移动

最新推荐文章于 2024-06-28 13:50:51 发布

卷毛崽

最新推荐文章于 2024-06-28 13:50:51 发布

阅读量1.7k

点赞数

分类专栏： H5+CSS javascript

本文链接：https://blog.csdn.net/qq_42221321/article/details/119215414

版权

本文介绍了如何使用原生JavaScript实现div元素的拖动功能，重点讲解了clientX、clientWidth、offsetWidth、scrollWidth等属性的区别，并通过一个面向对象的案例展示了按住鼠标拖动列表时，元素如何进行左右移动，同时确保拖动过程中元素的位置准确无误。

摘要由CSDN通过智能技术生成

clientX 鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变；
clientWidth =width+左右padding
offsetWidth=width+左右padding+左右border
srollWidth:指定标签内容曾的真实宽度,包含可视区域和被隐藏区域
offsetLeft：当前元素左边框外边缘到最近的已定位父级（offsetParent）左边框内边缘的距离。如果父级都没有定位，则分别是到body 顶部和左边的距离

原生JS案例（面向对象）——按住鼠标实现左右拖动列表
 JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别

html

      <div class="history-header">
        <div class="progress-bar">
          <div v-for="(item, index) in dateData" :key="index">
            <div
              class="node"
              @click="activeClick(index)"
              :class="nodeIndex == index ? 'active' : 'node'"
            >
              <div class="node-text">{
  { item.date }}</div>
              <div class="node-icon"></div>
            </div>
            <div
              class="line"
              :class="index == 7 ? 'line_active