基于 react 实现的自由布局
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
build
public
src
.gitignore
README.md
index.html
package.json
yarn.lock

README.md

React-free-layout

基于 React 实现的自由布局, 可以自由排序、缩放

live demo: https://jiangyuzhen.github.io/react-free-layout/

解析知识点

基于 jQuery 的事件委托, 减少性能损耗

  $('#items').on('mousedown', '.div_wrapper_line', (e) => {
    // ...
  })

sortablejs: Sortable is a minimalist JavaScript library for reorderable drag-and-drop lists.

利用 after 伪元素扩张操作区域

  .div_wrapper_line:hover{
      cursor: e-resize;
  }

  .div_wrapper_line::after{
      content: '';
      height: 100%;
      display: inline-block;
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: -15px;
      right: -15px;
  }