Skip to content
No description, website, or topics provided.
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
lib
src
test
.babelrc
.gitignore
README.md
index.html
package.json
yarn.lock

README.md

这是一个用于拖拽排序的包.

DEMO

DEMO

安装

npm i @redbuck/draggerjs或者 yarn add @redbuck/draggerjs

引入

插件打包格式为UMD

因此既可以使用<script>标签引入,然后直接使用window.Dragger

也可以通过importrequire的方式引入.

注意,插件使用了部分ES6API,如需兼容需要添加polyfill或者配置babel-runtime等.

使用

  1. 一般用法
 <div id="wrap">
    <div class="item">item - 1</div>
    <div class="item">item - 2</div>
    <div class="item">item - 3</div>
    <div class="item">item - 4</div>
 </div>
new Dragger(document.getElementById('wrap'))
  1. 结合MVVM框架 以VUE为例
  mounted() {
	this.dragger = new Dragger(this.$refs.list, {
	  // 关闭自动换位
	  change: false,
	})
	// 拖拽结束时,实例对外抛出drag-over事件.
	// 携带对象{source: number, target: number}
	// 可以知道是哪两个元素需要交换位置
	this.dragger.on('drag-over', pos => {
	  this.changeItem(pos);
	  // 在合适的时机刷新实例
	  setTimeout(() => {
		this.dragger.freshThreshold();
	  }, 20)
	})
  }

知道了需要交换位置的元素,开发者可以自行操作数据,示例如下

	changeItem({source, target}) {
	  let list = this.list;
	  let temp = list.splice(source, 1);
	  let start = list.splice(0, target);
	  // do something
	  this.list = [...start, ...temp, ...list];
	},

参数

参数 类型 默认值
el Element undefined
option Object {dir: 'y', change: true}

dir可选[x, y],决定排序方向 change表示拖拽结束是否自动换位

预览

  1. 运行git clone https://github.com/xty1992a/draggerjs.git
  2. 进入项目根目录,运行npm iyarn
  3. 运行npm run dev
  4. 浏览器查看localhost:8080
You can’t perform that action at this time.