这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

技术原理

我们需要知道鼠标的三个事件，分别是 mousedown，mousemove，mouseup ，当点击按下的时候，克隆一个绝对定位的元素，并标识下"拖拽中"的状态，接着在 mousemove 中就可以判断应该执行的具体方法，从而让元素随着鼠标移动起来。

在监听事件的 event 对象中，有几个参数是比较重要的：clientX，clientY 标识的鼠标当前横坐标和纵坐标，offsetX 和 offsetY 表示相对偏移量，可以在 mousedown 鼠标按下时记录初始坐标，在 mouseup 鼠标抬起时判断是否在目标区域中，如果是则用鼠标获取到的当前的偏移量 - 初始坐标得到元素实际在目标区域中的位置。

基础界面

先简单实现一个两栏布局界面，并应用上一些 CSS 效果:

<div id="app">
  <div class="slide">
    <div id="list">
      <img class="item" src="......." />
      <img  .........
    </div>
  </div>
  <div class="content"></div>
</div>
复制代码

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
}
.active {
  cursor: grabbing;
}

.slide {
  width: 260px;
  height: 100%;
  overflow: scroll;
  border-right: 1px solid rgba(0,0,0,.15);
  #list {
    user-select: none;
    .item {
      background: rgba(0,0,0,.15);
      width: 120px;
      display: inline-block;
      break-inside: avoid;  
      margin-bottom: 4px;
    }
    .item:hover {
      cursor: grab;
      filter: brightness(90%);
    }
    .item:active {
      cursor: grabbing;
    }
  }
  .grid {
      column-count: 2;
      column-gap: 0px;
  }
}
.slide::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

#content {
  position: relative;
  flex: 1;
  height: 100%;
  margin-left: 45px;
  background: rgba(0,0,0,.07);
  .item {
    position: absolute;
    transform-origin: top left;
  }
}

总结

前端开发者需要熟悉前端的三件套包括H5、Css3、JS这些基础的实现页面的代码。首先从H5的标签使用熟悉开始，H5的样式较为简单，需要配合CSS进行渲染，美化，加入坐标元素，颜色和不同的标签块需要进行分别渲染。而JS就是使前端可以动起来的工具，通过JS来实现用户与前端页面的交互，JS包含的事件包括，Click，Mouse类的事件，就是用于监听用户在页面上的行为，并且渲染出，用户在前端的行为，形成一个页面。手写一个JS拖拽方法，其实也是让用户和前端交互的一步，页面主要的使用者是用户。