不少管理后台支持拖放来调节左侧菜单的宽度，以此来提升用户体验。 本文会详细介绍下实现。 实现算法 实现的算法是：开始拖动分割线，监听光标移动，记录光标的水平位置，设置菜单宽度为当前宽度。

本文阿宝哥分析了 Excalidraw 这款在线绘图工具，所提供的一些不错功能背后使用的技术。了解并掌握了这些相关技术之后，在今后的工作中也许就会有用武之地。

定义一个变量type，用于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，比如：产品、广告图... 即松开鼠标、或离开释放区域，则恢复默认状态。 上方的计算规则，用于判断元素是否为拖拽元素。 页面的显示方式，拖拽的时候只显示组件名，释放之后才恢复正常显示内容。 其实并不复杂…

前言 hello，大家好，我是dooringx-lib的作者。今天刚刚开源了我们dooringx项目的可视化拖拽框架dooringx-lib。 和别的开源项目比，dooringx-lib除了提供基础的

vscode 是前端工程师常用的 ide，而且它的实现也是基于前端技术。既然是前端技术实现的，那么我们用所掌握的前端技术，完全可以实现一个类似 vscode 的 ide。但在那之前，我们首先还是要把

老逛每天都会去 ProductHunt 看看，这是一个发掘有意思产品的国外平台。 这个平台现在已经成为了用户发现新产品、创业者们获得灵感、投资人们寻找新机会，以及创始人对自己的产品进行推广的最佳去处。

无论大公司还是小公司，我们开发前端工程时候，项目工程又很多类似的功能或者页面，开发经常是加班加点搬砖去做一些无成长反复操作的工作，看键盘上 Ctrl 键已经被磨掉了漆，C 和 V 也马上磨白了，那对于开发如何把这些重复的工作用机器去解决？在前端资源紧缺的情况下，是否可直接有工具…

随公司业务不断发展，营销活动、广告、页面改版等需求日益倍增，靠纯人工撸代码已经无法跟上需求增长速度。加班？招人？显得不够明智，也不够前端，提效也就成为了关键。如何提效？从何入手？那不得不提的就是前端提效神器 —— 搭建系统，下文将从多个方面，向大家简单介绍政采云前端团队 Zoo…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…