Sortable

1 Sortable

Sortable是javascript库里面的拖动排序插件。

Demo: http://rubaxa.github.io/Sortable/

2 特性

兼容触屏设备和兼容多个浏览器（包括IE9）。
可以把一个清单拖拽到同一个列表中的另外一个位置。
拖拽元素的时候，支持CSS3动画效果。
漂亮的自动滚动效果。
使用原生的HTML5 拖拽API实现。
Supports
Meteor
AngularJS
- 2.0+
- 1.*
React
- ES2015+
- Mixin
Knockout
Polymer
Vue
支持很多CSS库，例如：Bootstrap
API简单
CDN
不需要使用jQuery（但支持使用）

Sortable可以兼容多个框架，如果有兴趣的话可以点击相应链接进行学习。

3 使用

Sortable函数总共有两个参数：

el（HTMLElement）：需要进行拖拽操作的列表Dom元素id（这里不一定是传ID，如使用react，可以传入ref。只需要把Dom传进去就可以了）

option：参数对象，可对拖拽效果进行修改。

html文件（index.html）这里需要自己在网上下载Sortable.js库

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="x-dns-prefetch-control" content="on" />
	<title>Sortable. No jQuery.</title>

	<style type="text/css">
	.block__list_words li {
		background-color: #ccc;
		padding: 10px 40px;
	}
	.block__list_words .sortable-ghost {
		opacity: 0.4;
		background-color: #F4E2C9;
	}
	.drag-handle {
		margin-right: 10px;
		font: bold 20px Sans-Serif;
		color: #5F9EDF;
		display: inline-block;
		cursor: move;
		cursor: -webkit-grabbing;  /* overrides 'move' */
	}
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	</style>
</head>
<body>

<!-- 'handle' option -->
<div style="margin-top: 100px;margin-left: 30px;">
	<div style="width: 500px; margin-left: 10px" class="block__list_words">
		<ul id="handle-1">
			<li><span class="drag-handle">&#9776;</span>Select text freely</li>
			<li><span class="drag-handle">&#9776;</span>Drag my handle</li>
			<li><span class="drag-handle">&#9776;</span>Best of both worlds</li>
		</ul>
	</div>
</div>

<script src="Sortable.js"></script>

<script type="text/javascript">
	(function () {
		'use strict';

		var byId = function (id) { 
			return document.getElementById(id); 
		};

		// 'handle' option
		Sortable.create(byId('handle-1'), {
			handle: '.drag-handle',
			animation: 150
		});

	})();
</script>

</body>
</html>

参考：

https://github.com/RubaXa/Sortable