1209 今日总结

今日工作

迭代开发

今天的开发接触了很多 鼠标事件

onClick
onDblClick
onMouseDown 鼠标按下
onMouseUp 鼠标松开
onMouseEnter 鼠标移入
onMouseOver 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove 鼠标移动时触发的事件
onMouseOut 当鼠标离开某对象范围时触发的事件
onKeyPress
onKeyDown
onKeyUp

明天会用到图片的拖拽相关，先学习了解相关的资料：

在 HTML 中，只有以下元素默认可以拖拉：

图片
链接
选中的文字

对于其他的元素，如果要实现可拖动，需要添加属性 draggable="true"，例如：

html

<div draggable="true">
  此区域可拖拉
</div>

学习了解以下拖拉相关的事件：

drag
dragstart
dragend
dragenter
dragover
dragleave
参考的demo

具体代码：

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Dom Drag Event</title>
    <style type="text/css">
      div {
        width: 100px;
        height: 100px;
        background-color: gray;
        margin-bottom: 20px;
      }
      #draggable {
        position: absolute;
      }
      </style>
  </head>
  <body draggable="true">
    <div class="dropzone" id="0">
      <div id="draggable" draggable="true">
        该节点可拖拉
      </div>
    </div>
    <div class="dropzone" id="1"></div>
    <div class="dropzone" id="2"></div>
    <div class="dropzone" id="3"></div>

    <script>
      // 被拖拉节点
      var dragged;
      var dif = {};
      document.addEventListener('dragstart', function (event) {
        dif.x = event.clientX - event.target.offsetLeft;
        dif.y = event.clientY - event.target.offsetTop;
        // 保存被拖拉节点
        dragged = event.target;
        // 被拖拉节点的背景色变透明
        event.target.style.opacity = 0.5;
      }, false);

      document.addEventListener('dragend', function (event) {
        dragged.style.left = (event.clientX - dif.x) + "px";
        dragged.style.top = (event.clientY - dif.y) + "px";
        // 被拖拉节点的背景色恢复正常
        event.target.style.opacity = '';
      }, false);

      document.addEventListener('dragover', function (event) {
        // 防止拖拉效果被重置，允许被拖拉的节点放入目标节点
        event.preventDefault();
      }, false);

      document.addEventListener('dragenter', function (event) {
        // 目标节点的背景色变紫色
        // 由于该事件会冒泡，所以要过滤节点
        if (event.target.className === 'dropzone') {
          event.target.style.background = 'purple';
        }
      }, false);

      document.addEventListener('dragleave', function( event ) {
        // 目标节点的背景色恢复原样
        if (event.target.className === 'dropzone') {
          event.target.style.background = '';
        }
      }, false);

      document.addEventListener('drop', function( event ) {
        // 防止事件默认行为（比如某些元素节点上可以打开链接），
        event.preventDefault();
        if (event.target.className === 'dropzone') {
          // 恢复目标节点背景色
          event.target.style.background = '';
          // 将被拖拉节点插入目标节点
          dragged.parentNode.removeChild(dragged);
          event.target.appendChild( dragged );
        }
      }, false);
    </script>
  </body>
</html>

当然，

也可以使用 onmousedown, onmouseup, onmouseover 三个鼠标事件实现拖动；

简单写了个一个有 bug 的例子：drag-div-with-mouse-event

今日算法

今日学习：

重学递归

今日复习：

手撕代码

防抖节流等各种手写，http和网络，浏览器原理，性能优化，Webpack

利用 mouse 事件写一个可拖拽的 div

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    div {
    border: 1px solid red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
  }

*{margin:0; padding: 0;}
  </style>
</head>
<body>
<div id="xxx"></div>

<script>
  var dragging = false
  var position = null

  xxx.addEventListener('mousedown',function(e){
    dragging = true
    position = [e.clientX, e.clientY]
  })

  document.addEventListener('mousemove', function(e){
    if(dragging === false){return}
    console.log('hi')
    const [x, y] = [e.clientX, e.clientY]
    const [originX, originY] = position || [0, 0]
    const [deltaX, deltaY] = [x - originX, y - originY]
    const [left, top] = [parseInt(xxx.style.left || 0), parseInt(xxx.style.top || 0)]
    xxx.style.left = left + deltaX + 'px'
    xxx.style.top = top + deltaY + 'px'
    position = [x, y]
  })
  document.addEventListener('mouseup', function(e){
    dragging = false
  })
</script>

</body>
</html>

演示demo

核心要点

需要使用 document.addEventListener('mousemove',fn) 而不是 dom.addEventListener('mousemove',fn) 否则会有 bug，拖拽过程中移出了拖拽体，就出bug 了

心情

2021年我在掘金掘到了什么？是寂寞吗？看看搞笑却有有意思的文章

好文推荐

有感好文

20+个超级实用的 JavaScript 开发技巧
自定义Hook会很难吗？学习了解一下自定义 hook
『2021年终总结』10年深飘，3辆车，3套房通过互联网红利积累原始资本，在深圳买房，敬佩！
【卷王的2021】前端：从995到965且涨薪40+%? 技术人的最终目标是国企，是体制？

反问一下自己：你的 2021 总结是什么样呢？

项目/博客推荐

值得学习的项目/作者

彻底搞懂HTTP协议 - 天天造轮子看看然叔的造轮子文章
如何做前端单元测试学习政采云前端团队的前端单测文章
前端架构师破局技能，NodeJS 落地 WebSocket 实践了解一下知识盲区 websocket

面经相关

八股文相关

JavaScript的单线程你真的理解了吗？

明日计划

算法：
- 学习：
- 复习：
手写：
面经复习：

TODOS

短期内要做的事情

每天看这么多文章，也仅仅只是看过了，希望日后每次文章阅读，都能 写/摘抄几句话的感悟和成长
多进行体系化阅读，持之以恒和坚持输出；
自定义Hook会很难吗？学习了解一下自定义 hook
2021 年年中总结；

1209 今日总结 ​

今日工作 ​

今日算法 ​

手撕代码 ​

心情 ​

好文推荐 ​

项目/博客推荐 ​

面经相关 ​

明日计划 ​

TODOS ​

1209 今日总结

今日工作

今日算法

手撕代码

心情

好文推荐

项目/博客推荐

面经相关

明日计划

TODOS