Sortablejs 简介
Sortable —是一个JavaScript库,用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。支持Meteor,AngularJS,React,Polymer,Vue,Ember,Knockout和任何CSS库,例如Bootstrapsorablejs
demo 网站
一看这解释感觉就是很棒的感觉
特征支持触摸设备和现代浏览器(包括IE9)
可以从一个列表拖动到另一个列表或在同一列表内
支持拖动手柄和可选文本(比voidberg的html5sortable更好)
智能自动滚动
高级交换检测
流畅的动画
多拖动支持
支持CSS转换
使用原生HTML5拖放API构建
支持Meteor
Angular2.0+1.*
React
ES2015+Mixin
Knockout
Polymer
Vue
Ember
支持任何CSS库,例如Bootstrap
简单的API
支持插件
CDN
不需要jQuery(但有支持)
typscript定义在 @types/sortablejs
文章Dragging Multiple Items in Sortable (April 26, 2019)
Swap Thresholds and Direction (December 2, 2018)
Sortable v1.0 — New capabilities (December 22, 2014)
Sorting with the help of HTML5 Drag'n'Drop API (December 23, 2013)
安装npm install sortablejs --save
导入// Default SortableJS
import Sortable from 'sortablejs';
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
插件导入// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';
Sortable.mount(new MultiDrag(), new Swap());
// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
Sortable.mount(new AutoScroll());
基本模板以及样式代码
字段列表
将字段拖动到数据透视区域
:data-id="li['id']"
:data-label="li['labelKey']"
:data-value="li['valueKey']"
:key="index"
data-fun-name="sum"
v-for="(li,index) in options"
>{ {li['labelKey']}}
数据透视区域
在下面区域拖动字段
过滤器
行
值
更新
:class="'menu'"
:key="index"
@click.stop="menuClick($event, index, item)"
v-for="(item, index) in menus"
>{ {item.value}}
字段设置
原名称:
{ {originName}}
自定义名称:
分类汇总
选择一个函数:
:data-id="item.id"
:data-label="item.label"
:data-value="item.value"
:value="item.label"
v-for="(item, index) in settings"
>{ {item.value}}
确定
取消
.report-wrap {
width: 100vw;
height: 100vh;
display: flex;
.report-container {
width: 70vw;
height: 100%;
background-color: aqua;
}
.select-container {
box-sizing: border-box;
padding: 12px;
width: 25vw;
height: 100%;
h3.key-list-title {
color: rgb(56, 141, 145);
margin-bottom: 4px;
}
.key-list {
ul.key {
background-color: #fff;
height: 355px;
overflow: hidden;
margin-top: 6px;
display: flex;
flex-flow: column;
li {
padding: 6px;
cursor: -webkit-grab;
}
li:hover {
background-color: rgb(230, 230, 230);
}
}
}
.data-view-content {
margin-top: 20px;
box-sizing: border-box;
.view {
box-sizing: border-box;
display: flex;
justify-content: space-around;
.other {
height: 150px;
background-color: #fff;
overflow-y: auto;
ul {
box-sizing: border-box;
padding: 2px;
li {
position: relative;
box-sizing: border-box;
padding: 2px;
border: 1px solid rgb(230, 230, 230);
background-color: #fff;
margi