Vue + vueDraggable to achieve drag layout effect
The project consists of configuration layout page + display page, after realizing the configuration layout effect, the foreground display effect
Use flex layout left and right adaptive
1. The configuration page is as follows:
Traversal module Array render module:
Initialize data:
The hook function gets the page layout:
Set the new layout in the drag end onEnd() event:
Attach style code for drag and drop:
After foreground configuration and cache layout data, display page obtain display: here because there is no background interface cooperation, we use the technology of localStorage cross-domain storage to realize localStorage shared display page get layout in the cache and assign value to mainData to display:
