iangularjs 模板_(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

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