jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 > ui >

vue-js-grid 活泼动效的拖动排序

官方网址:http:// 下载次数:
插件描述

动效非常精致,被拖动者会“颤抖”,其它对象会受拖动影响而平滑运动

槽点

动效整体都非常美好,但作为“组件”有明显的瑕疵 
组件混合window_size进来负责判断容器宽高,但写死为对整个页面窗口提取尺寸,而非父容器 
于是它在一个受限的局部容器中不能正常工作 
为了修正这一点,你可以简单的把源文件中的长度值写死为你需要的值,并注释掉resize的事件监听 
这样做的缺点是组件不再响应容器尺寸变化,但它可以正常工作了 
更周全的解决方案是clone该组件并修改window_size.js,编写代码向上追溯容器DOM并针对此DOM的尺寸进行监听调整 
本页中Demo使用的是简单方案(你可以发现,调整容器大小不能让可爱的小糖果们重新排队〒_〒) 
此外,有些属性好象根本不工作,所以严肃的使用方式还是clone下项目,按自己的需求做相应的调整


cnpm install --save vue-js-grid


/*在.vue中引入*/
<template>
<grid
  :draggable="true"
  :sortable="true"
  :items="items"
  :height="100"
  :width="100">
  <template slot="cell" scope="props">
    <div>{{props.item}}</div>
  </template>
</grid>
</template>
<script>
import Vue from 'vue'
import Grid from 'vue-js-grid'
Vue.use(Grid)
export default {
  data () {
    return {
      items: [
        'a',
        'b',
        'c'
      ]
  }  
}
</script>


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表