前几天用js实现了鼠标拖动div的功能，但是用起来不是那么便捷，于是想着把这个功能做成一个组件，使用的时候直接引入，不用再写那么多冗余代码了。

想要实现的效果

• 只要把div注册到该组件，目标div就都能随意拖动
• 可设置div能够拖动的范围

实现分析

js组件的基本写法和div拖动的逻辑就不再赘述了，前面文章已经说过了，可点击下面链接查看

宽度

$('div').width();区块的本身宽度

$('div').outerWidth(); 区块的宽度+padding宽度+border宽度

$('div').outerWidth(true); 区块的宽度+padding宽度+border宽度+margin的宽度

效果图:

核心点:

• div宽度自适应

宽度自适应 width
默认情况下, 块级元素不设置宽度, 默认为整个屏幕宽度或者和父级同宽
如果元素脱离了文档流(浮动或者定位), 那么元素的宽度由元素的内容决定

在前端开发中，我们经常需要获取元素的像素宽度，然而有些元素的宽度是通过CSS的百分比来设置的。本文将介绍如何使用JavaScript获取这种情况下的元素像素宽度。

使用JavaScript获取元素的像素宽度

在实现了可拖动div的组件后，又联想到拖拽可改变div大小的需求，话不多说先看效果，再来慢慢分析

组件分析

• 给目标div增加四周的边框，并且在边框的八个方向增加拖拽点，分别用方向的首字母组合代替
• 当鼠标落在八个点上时，鼠标形状变成向各个方向拖拽的形状

介绍

Pure.css是一组小型的自适应CSS模块，可以在每个Web项目中使用。Pure以Normalize.css为基础，并提供native HTML元素以及最常见的UI组件的布局和样式，考虑到移动设备，Pure具有开箱即用的响应能力，因此元素在所有屏幕尺寸上都看起来不错。

<link rel="stylesheet" href="./pure-min.css"  />