有关拖拽问题

最近熬夜有些凶，熬多了，脑袋发晕，《斯坦福高效睡眠法》还没有听完，得继续听完，狗命要紧。

继续说下前端小知识点。

HTML5新看到一个有意思的内容，拖放。相信大部分同学都有用到过。其实实现也很简单。

<div id="div1" dragable >拖动我</div>

一般加了 dragable 为true时，这个div就是可拖拽的了。

但是需要把它放在具体的div中，所以还需要绑定函数。

被拖拽的元素需要绑定id，在拖拽时知晓是哪个元素被拖拽，在松开鼠标时，也知道，是哪个元素需要被放到当前div中。

const [activeId, setActiveId] = useState('');
const onDragStart = (id: any) => {
    setActiveId(id);
};

<div
    id={item.id}
    draggable={true}
    // 被拖拽开始时存下当前元素的id
    onDragStart={() => onDragStart(item.id)}
    // 拖拽结束，将id清空
    onDragEnd={() => setActiveId('')}
    >
    {item.text}
</div>

拖拽要放的目标位置，也需要绑定一些函数。否则，被拖拽的元素，就是自娱自乐，无法放到目标位置。

  const onDrop = (ev) => {
    ev.persist();
    ev.target.appendChild(document.getElementById(activeId));
  };
  const onDragOver = (e) => {
    // 注意这里只使用这个函数，不用执行e.persist(); 否则无法执行后续的onDrop
    e.preventDefault();
  };


<div
    className="drop"
    id="drop"
    onDrop={(ev) => onDrop(ev)}
    onDragOver={onDragOver}
    >
    放在我这里
</div>

有趣的代码，大致，就是这样，外层内容也比较简单。按照这样的操作，可以自己添加其他的功能，比如做一个任务面板。

已完成，未完成，进行中，等等，需求可以自己设计，实现方式大致就是上述方式。

看下实现之后的图吧。

还有有关css的题目。

• 如何让一个元素，垂直水平居中，有多少种方案
• 浮动布局的优缺点
• 如何实现让 div 垂直居中，左右10px，高度始终为宽度一半？

前两个题目比较简单，第三个，其实也比较简单。

第一个题目：

1. 行内元素 text-align，line-height 垂直水平居中。vertical-align 等
2. 绝对定位，子元素定位+transfrom
3. flex布局 父元素：justify-content: center;
   align-items: center;
4. 还有一些margin相关的

第二个：
浮动相关的就是清除浮动的方式。一般会给浮动元素的伪类元素clear:both；

优点：

• 图文混排时，可以让文字环绕在图片周围
• 浮动元素，可设置宽高
• 可设置浮动的方向，right，left， center

缺点：

• 添加额外标签，并添加 clear:both 的样式
• 父级添加 overflow 属性，或者设置高度
• 建立伪类选择器清除浮动（一般用这个）

div:after{
    /* 设置添加子元素的内容是空 */
      content: '';
      display: block;
      height: 0;
      /* 设置添加子元素看不见 */
      visibility: hidden;
      /* 设置clear：both */
      clear: both;
}

第三个：可以用div嵌套的方式。

.outer_wrapper {
  margin: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
  .inner_wrapper {
    background-color: aquamarine;
    position: relative;
    width: 100%;
    height: 0;
    // 固定最内层的div的高度为最外层的高度的一半。
    padding-bottom: 50%;
  }
  .box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: beige;
    display: flex;
    justify-self: center;
    align-items: center;
    font-size: 20px;
  }
}

今天大致就这么多啦，有没有学到新知识～