vue 网格布局_Vue.js的可拖动和可调整大小的网格布局_cuk5239的博客

Vue网格布局 ( vue-grid-layout )

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout

vue-grid-layout是Vue.js的网格布局系统，例如Gridster。在React-Grid-Layout中大受启发

View demo Download Source

使用vue-grid-layout的项目 ( Projects using vue-grid-layout )

Draxed

德拉克斯

Know of others? Create a PR to let me know!

认识别人吗？ 建立公关让我知道！

特征 ( Features )

Draggable widgets

可拖动的小部件
Resizable widgets

可调整大小的小部件
Bounds checking for dragging and resizing

边界检查以进行拖动和调整大小
Widgets may be added or removed without rebuilding grid

无需重建网格即可添加或删除小部件
Layout can be serialized and restored

布局可以序列化和还原
Automatic RTL support

自动RTL支持

入门 ( Getting Started )

安装 ( Installation )

Install the vue-grid-layout package package using npm :

使用 npm 安装vue-grid-layout 软件包：

npm install vue-grid-layout

用法 ( Usage )

npm install vue-grid-layout

or include the script in your html (download from releases ):

或将脚本包含在html中(从 releases 下载)：

<script src="vue-grid-layout.min.js"></script>

var testLayout = [
	    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
	    {"x":8,"y":0,"w":2,"h":3,"i":"4"},
	    {"x":10,"y":0,"w":2,"h":3,"i":"5"},
	    {"x":0,"y":5,"w":2,"h":5,"i":"6"},
	    {"x":2,"y":5,"w":2,"h":5,"i":"7"},
	    {"x":4,"y":5,"w":2,"h":5,"i":"8"},
	    {"x":6,"y":4,"w":2,"h":4,"i":"9"},
	    {"x":8,"y":4,"w":2,"h":4,"i":"10"},
	    {"x":10,"y":4,"w":2,"h":4,"i":"11"},
	    {"x":0,"y":10,"w":2,"h":5,"i":"12"},
	    {"x":2,"y":10,"w":2,"h":5,"i":"13"},
	    {"x":4,"y":8,"w":2,"h":4,"i":"14"},
	    {"x":6,"y":8,"w":2,"h":4,"i":"15"},
	    {"x":8,"y":10,"w":2,"h":5,"i":"16"},
	    {"x":10,"y":4,"w":2,"h":2,"i":"17"},
	    {"x":0,"y":9,"w":2,"h":3,"i":"18"},
	    {"x":2,"y":6,"w":2,"h":2,"i":"19"}
	var GridLayout = VueGridLayout.GridLayout;
	var GridItem = VueGridLayout.GridItem;
	new Vue({
	    el: '#app',
	    components: {
	        GridLayout,
	        GridItem,
	    data: {
	        layout: testLayout,
 <grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i">
            {{item.i}}
        </grid-item>
    </grid-layout> 
  文献资料 (Documentation) 
  物产 (Properties) 
  网格布局 (GridLayout) 
 
 
layout
  布局 
 
 
   
ArrayArray 
truetrue 
This is the initial layout of the grid.
  这是网格的初始布局。 
 
 
The value must be an Array of Object items. Each item must have i, x, y, w and h proprties. Please refer to GridItem documentation below for more informations.
  该值必须是Object项Array 。 每个项目都必须具有i ， x ， y ， w和h属性。 请参阅下面的GridItem文档以获取更多信息。 
 
 
 
colNum
  专栏 
 
 
   
NumberNumber 
falsefalse 
1212 
Says how many columns the grid has.
  说出网格有多少列。 
 
 
The value should be a natural number.
  该值应为自然数 。 
 
 
 
rowHeight
  rowHeight 
 
 
   
NumberNumber 
falsefalse 
150150 
Says what is a height of a single row in pixels.
  说一行的高度(以像素为单位)。 
 
 
 
maxRows
  maxRows 
 
 
   
NumberNumber 
falsefalse 
InfinityInfinity 
Says what is a maximal number of rows in the grid.
  说出网格中最大的行数。 
 
 
 
margin
  保证金 
 
 
   
ArrayArray 
falsefalse 
[10, 10][10, 10] 
Says what are the margins of elements inside the grid.
  说出网格内元素的边距是多少。 
 
 
The value must be a two-element Array of Number. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.
  该值必须是两个元素的Number Array 。 每个值均以像素表示。 第一个元素是水平边距，第二个元素是垂直边距。 
 
 
 
isDraggable
  isDraggable 
 
 
   
BooleanBoolean 
falsefalse 
truetrue 
Says if the grids items are draggable.
  说网格项目是否可拖动。 
 
 
 
isResizable
  isResizable 
 
 
   
BooleanBoolean 
falsefalse 
truetrue 
Says if the grids items are resizable.
  说网格项目是否可调整大小。 
 
 
 
isMirrored
  isMirrored 
 
 
   
BooleanBoolean 
falsefalse 
falsefalse 
Says if the RTL/LTR should be reversed.
  说是否应该逆转RTL / LTR。 
 
 
 
autoSize
  自动尺寸 
 
 
   
BooleanBoolean 
falsefalse 
truetrue 
Says if the container height should swells and contracts to fit contents.
  说容器高度是否应该膨胀并收缩以适合内容物。 
 
 
 
verticalCompact
  verticalCompact 
 
 
   
BooleanBoolean 
falsefalse 
truetrue 
Says if the layout should be compact vertically.
  说布局是否应在垂直方向上紧凑。 
 
 
 
useCssTransforms
  useCssTransforms 
 
 
   
BooleanBoolean 
falsefalse 
truetrue 
Says if the CSS transition-property: transform; should be used.
  说CSS transition-property: transform; 应该使用。 
 
 
  网格项 (GridItem) 
 
 
i
  一世 
 
 
   
StringString 
truetrue 
This is the unique identifier of the item.
  这是商品的唯一标识符。 
 
 
 
x
  X 
 
 
   
NumberNumber 
truetrue 
Says what is a initial horizontal position of the item (in which column it should be placed).
  说项目的初始水平位置是什么(应将其放置在哪一列中)。 
 
 
The value must be a whole number.
  该值必须是整数 。 
 
 
 
y
  ÿ 
 
 
   
NumberNumber 
truetrue 
Says what is a initial vertical position of the item (in which row it should be placed).
  说项目的初始垂直位置是什么(应将其放置在哪一行)。 
 
 
The value must be a whole number.
  该值必须是整数 。 
 
 
 
w
  w 
 
 
   
NumberNumber 
truetrue 
Says what is a initial width of the item.
  说什么是项目的初始宽度。 
 
 
The value is a number that is multiplied by colWidth.
  该值是一个数字乘以colWidth 。 
 
 
 
h
  H 
 
 
   
NumberNumber 
truetrue 
Says what is a initial height of the item.
  说什么是物品的初始高度。 
 
 
The value is a number that is multiplied by rowHeight.
  该值是一个乘以rowHeight 。 
 
 
 
minW
  最小功率 
 
 
   
NumberNumber 
falsefalse 
11 
Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.
  说什么是物品的最小宽度。 如果w较小，则minW则w将设置为minW 。 
 
 
The value is a number that is multiplied by colWidth.
  该值是一个数字乘以colWidth 。 
 
 
 
minH
  分钟 
 
 
   
NumberNumber 
falsefalse 
11 
Says what is a minimal hieght of the item. If h will be smaller then minH then h will be set to minH.
  说什么是物品的最小高度。 如果h较小，则minH则h将设置为minH 。 
 
 
The value is a number that is multiplied by rowHeight.
  该值是一个乘以rowHeight 。 
 
 
 
maxW
  最大功率 
 
 
   
NumberNumber 
falsefalse 
InfinityInfinity 
Says what is a maximal width of the item. If w will be bigger then maxW then w will be set to maxW.
  说什么是物品的最大宽度。 如果w会更大然后maxW然后w将被设置为maxW 。 
 
 
The value is a number that is multiplied by colWidth.
  该值是一个数字乘以colWidth 。 
 
 
 
maxH
  最高 
 
 
   
NumberNumber 
falsefalse 
InfinityInfinity 
Says what is a maximal height of the item. If h will be bigger then maxH then h will be set to maxH.
  说什么是物品的最大高度。 如果h会更大，则maxH然后h将被设置为maxH 。 
 
 
The value is a number that is multiplied by rowHeight
  该值是一个数字乘以rowHeight 
 
 
 
isDraggable
  isDraggable 
 
 
   
BooleanBoolean 
falsefalse 
nullnull 
Says if item is draggable.
  说项目是否可拖动。 
 
 
If default value is null then it's inherited from parent.
  如果默认值为null则它是从父级继承的。 
 
 
 
isResizable
  isResizable 
 
 
   
BooleanBoolean 
falsefalse 
nullnull 
Says if item is resizable.
  说项目是否可调整大小。 
 
 
If default value is null then it's inherited from parent.
  如果默认值为null则它是从父级继承的。 
 
 
 
dragIgnoreFrom
  dragIgnoreFrom 
 
 
   
StringString 
falsefalse 
'a, button''a, button' 
Says which elements of the item shouldn't trigger drag event of the item.
  说出该项目的哪些元素不应该触发该项目的拖动事件。 
 
 
The value is css-like selector string.
  该值是css-like选择器字符串。 
 
 
For more info please refer to ignoreFrom in interact.js docs.
  有关更多信息，请参考interact.js docs中的 ignoreFrom 。 
 
 
 
dragAllowFrom
  dragAllowFrom 
 
 
   
StringString 
falsefalse 
nullnull 
Says which elements of the item should trigger drag event of the item.
  说出该项目的哪些元素应触发该项目的拖动事件。 
 
 
The value is css-like selector string.
  该值是css-like选择器字符串。 
 
 
If null then one can drag by any (excluding dragIgnoreFrom) element of the item.
  如果为null则可以拖动该项目的任何元素(不包含dragIgnoreFrom )。 
 
 
For more info please refer to allowFrom in interact.js docs.
  有关更多信息，请参阅interact.js docs中的 allowFrom 。 
 
 
 
resizeIgnoreFrom
  resizeIgnoreFrom 
 
 
   
StringString 
falsefalse 
'a, button''a, button' 
Says which elements of the item shouldn't trigger resize event of the item.
  说出该项目的哪些元素不应该触发该项目的调整大小事件。 
 
 
The value is css-like selector string.
  该值是css-like选择器字符串。 
 
 
For more info please refer to ignoreFrom in interact.js docs.
  有关更多信息，请参考interact.js docs中的 ignoreFrom 。 
 
 
  大事记 (Events) 
 Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing. 
  可以将移动和调整大小事件侦听器添加到每个网格项目，以便在移动或调整网格元素时可以通知父Vue。 如果唯一需要的通知是项目完成移动或调整大小时，则可以添加移动和调整大小的事件侦听器。  
 Working example here 
  这里的工作示例  
 <grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
            @layout-updated="layoutUpdatedEvent"
        <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i"
                   @resize="resizeEvent"
                   @move="moveEvent"
                   @resized="resizedEvent"
                   @moved="movedEvent">
            {{item.i}}
        </grid-item>
    </grid-layout> 
 
 
layoutUpdatedEvent
  layoutUpdatedEvent 
 
 
Layout updated event
  布局更新事件 
 
 
Every time the layout has finished updating and positions of all grid-items are recalculated
  每次版面更新完成并重新计算所有网格项目的位置时 
 
 
 layoutUpdatedEvent: function(newLayout){
      console.log("Updated layout: ", newLayout)
 
 
moveEvent
  moveEvent 
 
 
Move event
  移动事件 
 
 
Every time an item is being moved and changes position
  每次移动物品并更改位置 
 
 
 moveEvent: function(i, newX, newY){
        console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
 
 
resizeEvent
  resizeEvent 
 
 
Resize event
  调整大小事件 
 
 
Every time an item is being resized and changes size
  每次调整大小并更改大小时， 
 
 
 resizeEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
 
 
movedEvent
  moveEvent 
 
 
Moved event
  活动事件 
 
 
Every time an item is finished being moved and changes position
  每次完成移动并更改位置时， 
 
 
 movedEvent: function(i, newX, newY){
        console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
 
 
resizedEvent
  resizedEvent 
 
 
Resized event
  调整大小的活动 
 
 
Every time an item is finished being resized and changes size
  每次完成调整项目大小并更改大小时 
 
 
     * @param i the item id/index
     * @param newH new height in grid rows 
     * @param newW new width in grid columns
     * @param newHPx new height in pixels
     * @param newWPx new width in pixels
    resizedEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
  有助于 (Contribute) 
 If you have a feature request, please add it as an issue or make a pull request. 
  如果您有功能请求，请将其添加为问题或提出拉取请求。  
  待办事项清单 (TODO List) 
 [x] Basic grid layout
 [x]基本网格布局 
[ ] Responsive
 []React灵敏 
[x] Draggable grid items
 [x]可拖动的网格项 
[x] Resizable grid items
 [x]可调整大小的网格项目 
[ ] Static elements
 []静态元素 
[x] Min/max w/h per item
 [x]最小/最大w / h 
  翻译自: https://vuejsexamples.com/a-draggable-and-resizable-grid-layout-for-vue-js/
 vue 网格布局
                                    vue网格布局组件 威格 (vue-grd)
Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd.
 简单，轻巧和灵活的Vue.js组件，用于网格布局。 Vue.js grd的端口。 
View demo
查看演示 View Github 
查看Github  安装 (Inst...
                                    在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
                                    vue 网格布局A draggable and resizable grid layout, for Vue.js.
 Vue.js的可拖动和可调整大小的网格布局。 
 Vue网格布局 (vue-grid-layout)
vue-grid-layout is a grid layout system, like Gridster, for Vue.js.
 vue-grid-layout是Vue....
1.给定网格之间的间隙大小=m时，头尾的网格和中间的网格尺寸差1/4m（如果等分数为3，那么会差1/2m）
2.本人是在vue项目里使用，很方便，当然我还是更推荐使用第三方网格插件
3.兼容性未知
<!-- 父元素 -->
.qiuGrid {
	position: relative;
// import echarts from 'echarts'; 
import * as echarts from 'echarts'; // 如果安装的是echarts 5以上版本，则需此种方式引入
Vue.prototype.$echarts = echarts
2. 定义防抖函数
// utils/common.js
// 防抖
function _debounce(fn, delay = 300
                                    之前最原始的效果是当你移动一个box时 即使你没松开鼠标 每一个被你移动中碰撞到的box都会发生改变 这可能不是我们想要的
我们通过创建一个historyLayout 拿来记录我们上一步的布局
在watchitem()里比较 如果不是当前操作的box 使其的位置保持不变
在moved()中调用一个调整位置的函数toChangePosit...