euvl / vue-js-grid

:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment )

⚠️ This an experement and not a production-ready plugin

Fixed size grid for Vue.js

This is very a first version of the plugin. If you find any bugs and/or want to contribute, feel free to create issues, PRs, or reach me out on twitter! 👍 🚀

Thanks!

Install

npm install --save vue-js-grid

import Vue from 'vue'
import Grid from 'vue-js-grid'

Vue.use(Grid)

Usage

data () {
  return {
    items: [
      'a',
      'b',
      'c'
    ]
}

<grid
  :draggable="true"
  :sortable="true"
  :items="items"
  :height="100"
  :width="100">
  <template slot="cell" scope="props">
    <div>{{props.item}}</div>
  </template>
</grid>

Codesandbox Demo

Plugin does NOT modify the source data array.

1. Every time permutation is performed you will get a new sorted array in event (items).
2. The same works for removing elements, you will get a new "cleaned" array in your @remove event handler.
3. Currently there is no way to extend data array after event handling. But hopefully I'll come up with a clean way to do it in nearest future.

Props

Name	Type	Default	Description
items	Array	[]	Initial array of items
cellWidth	Number	80	Cell width
cellHeight	Number	80	Cell height
draggable	Boolean	false	Flag that will let you drag grid's cells
dragDelay	Number	0	@TODO
sortable	Boolean	false	Flag that will let you reorder grid's cells; requires draggable to be true
center	Boolean	false	@TODO

Events

Name	Description
@change	Occurs on every action that involves reordering array or changing its length
@remove	Occurs when an element is deleted through template
@click	Occurs when cell is clicked
@sort	Occurs when array item order is changed manually

Cell template

Cell template is used to get access to list data, indexing, and sorting params generated by plugin.

Template's scope contains:

• props.item: list item value
• props.index: initial index of the item
• props.sort: current index of the item after sorting
• props.remove(): method that removes the item from the array and resort list.

Example:

<template slot="cell" scope="props">
  <div @click="() => { props.remove() }">
    <div>Data: {{props.item}}</div>
    <div>{{props.index}} / {{props.sort}}</div>
</template>

Why do I need this?

A good example of using a plugin would be rending macOS' Launchpad or Dock. Check out a demo for a solid example of how the plugin behaves & feels.

Demo: https://euvl.github.io/vue-js-grid/

Roadmap

1. Add element insertion
2. Add tests

vue-js-grid's Issues

Is the prop 'center' still a todo?

When I set the center prop to true the grid aligns all the items in the center, just as I expect.

The readme still states this to be a @TODO.
Is this still correct or is this feature implemented?

Why is the click event executed twice when I click on the child element once?

It's not always done twice,
`

         <grid  
            :draggable="true"
            :sortable="true"
            :items="dragnees"
            center
            @sort="dragnessChange"
            @click="dragnessClick"
            >
            <template slot="cell" slot-scope="props" >
                <div class="imgs">
                <img
                  class="imgItem"
                  :src="props.item.url"
                  alt=""
                />
                <img
                  class="icon"
                  @click="del(props)"
                  src="@/assets/images/publish/detele.png"
                  alt=""
                />
              </div>
            </template>
          </grid>

`

Support Extending Array

I know you are aware of this, but opening an issue to track the ability to extend the source data array without it causing the sorted array to become reset. I would love to use this in my production application but this is the only thing missing!

Horizontal position error

Horizontal position does not work correctly when body's padding is not 0

elements always wrap a new line by html's width

change Event Unable to trigger

Drag and drop doesn't scroll dwon / up.

Drag and drop doesn't scroll dwon / up.
move bottom item > top area
or
move top item > bottom area
can you please solve it?

scroll.not.10.04.44.mov

Failed to mount component: template or render function not defined.

I try to use the plugin as described in the example, but I get this error in console:

Failed to mount component: template or render function not defined.

Images

Is it possible to use this as script distribution?

Tried doing it by changing the webpack build conf as below:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vue-js-grid.js',
    library:'VueJsGrid',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }

but the component is not registered.
[Vue warn]: Unknown custom element: <grid> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Is there anyway to do this correctly

Use vue-js-grid in production

Hello. Please I wish to know why I can't use this plugin in production. I am very interested in using this - it makes it easier for my project and I am very attracted to it

Image display and reorder

Can it be used to display thumbnail images, and to drag and drop to change the order they appear in?

Hight overlapping

If the height of the draggable element is not fixed, it can be overlapped when it becomes higher.

Unable to set grid width based on parent of grid

Grid is being displayed out of its parent, since it has a width which is based on window width (as far as i can see), instead of parent's width.
I can't seem to find on the docs any way to even set a fixed grid width.

error！

your windowWidth is the all window，if I want to make a region，then do something ,just like many gridDiv , When the screen is zoomed out, the avalable windowWidth = windowWidth - other Field,
so can you edit your code to perfect the problem

When there is a scrollbar,Mouse dragging, scroll bar not moving

When there is a scrollbar,Mouse dragging, scroll bar not moving

原生拖拽

保留原生拖拽与拖放的api的事件以满足更多的应用场景

Why can grid's width change only according to the window's width?

Why can grid's width change only according to the window's width?

Make use of vue-npm-template

This is more of a suggestion to consider using vue-npm-template
It provides by default:

• rollup bundler (usually produces smaller bundles than webpack)
• commonjs, esm and umd builds
• sass support
• development server with little configuration within the same package.json

https://github.com/cristijora/vue-npm-template

If you are interested I can make a PR to a separate branch so you can try it out

Items floating outside parent element boundaries

Problem with using window width from what I can see is the dynamic width of the grid is dependent on the window width not the parent so this causes items to float outside the parent div. How can I fix this so the grid stays within the parent width boundaries?

Version 1.0.1 conflict

When installing the package using npm (Version 1.0.1), the version is different from the cloned source from Github. You can verify this by accessing the source in the /node_modules (installed package) and the source from the cloned package.

Not sure how to actually fix this?

line break does not work

Hello!
My grid items are not breaking line.

Extract css into a separate file

From what I see, the css is bundled together inside the final js output.
This can be an issue if you want to customize the css later on.
Also there is some css directly on the body
https://github.com/euvl/vue-js-grid/blob/master/src/Grid.vue#L228

image

when the gridItem contains image, it would be some trouble to catch the mouseup event,when the first time mouseup, it recognize it as another a click as mousedown and then could be drag,but now your mouse is up,and it follow your mouse ,when you want to end this drag progress, you should click another time and then trigger a click event,

document is undefined

vue-js-grid/dist/index.js:102:25 error: document is undefined

安卓系统移动不好使

错误原因在文件188行:
https://github.com/euvl/vue-js-grid/blob/master/src/Grid.vue

代码应该如下:
var targetItem = {}
var itemLength = this.list.length;
for (var i = 0 ; i < itemLength ; i++) {
if (this.list[i].index === itemIndex) {
targetItem = this.list[i];
}

Can you afford a prop can modify the source data array?

Can you afford a prop can modify the source array?

Don't support image

Don't support image

Add touch support

Add support for touchstart/touchend events

Internet Explorer and Edge issue

vue-js-grid doesn't work, it showed but i can't change the elements positions.

Internet Explorer v11.

Can I support "Cell" grouping?

As described in title,For example, there are "valid" and "invalid" data in the data, hoping to change the state of the data in the form of drag and dro