拖拽插件SortableJS的简单使用

最新推荐文章于 2024-07-28 20:27:10 发布

大路宽宽

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量3.1k

点赞数 1

分类专栏： react 文章标签： javascript jquery vue.js

本文链接：https://blog.csdn.net/weixin_54565737/article/details/122091124

版权

react 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在项目中，经常会遇到一些涉及到拖拽的需求，github上面有一个开源的SortableJS的插件，支持Vue，React，Angular等多种框架，实现效果很好，基本可以满足大部分的需求，下面就第一次在jquery中的使用做个简单的demo记录。

引入文件Sortable.min.js
指定包裹容器的id
根据api开始创建使用即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Sortable. No jQuery.</title>
		<link href="st/app.css" rel="stylesheet" type="text/css" /><!--可去掉，不影响功能-->		
	</head>
	<body>
		<div class="container" style="height: 520px">
			<div data-force="30" class="layer block" style="left: 14.5%; top: 0; width: 37%">
				<div class="layer title">List A</div>
				<ul id="foo" class="block__list block__list_words">
					<li>1aaaбегемот测试</li>
					<li>2корм</li>
					<li>3антон</li>
					<li>4сало</li>
					<li>5железосталь</li>
					<li>6валик</li>
					<li>7кровать</li>
					<li>8краб</li>
				</ul>
			</div>
		</div>
		<script src="Sortable.min.js"></script>
		<script>
			Sortable.create(document.getElementById('foo'), {
				animation: 150,
				store: {//缓存到localStorage
					get: function(sortable) {
						var order = localStorage.getItem(sortable.options.group);
						return order ? order.split('|') : [];
					},
					set: function(sortable) {
						var order = sortable.toArray();
						localStorage.setItem(sortable.options.group, order.join('|'));
					}
				},
				onAdd: function(evt) {
					console.log('onAdd.foo:', [evt.item, evt.from]);
				},
				onUpdate: function(evt) {
					console.log('onUpdate.foo:', [evt.item, evt.from]);
				},
				onRemove: function(evt) {
					console.log('onRemove.foo:', [evt.item, evt.from]);
				},
				onStart: function(evt) {
					console.log('onStart.foo:', [evt.item, evt.from]);
				},
				onSort: function(evt) {
					console.log('onStart.foo:', [evt.item, evt.from]);
				},
				onEnd: function(evt) {
					console.log('onEnd.foo:', [evt.item, evt.from]);
				}
			});
		</script>
	</body>
</html>

1、使用npm装包

$ npm install sortablejs --save

2、引入Sortable

import Sortable from "sortablejs";

3、使用方法

<div className="grid-box" ref={this.sortableGroupDecorator}>
    {menus &&
        menus.map((item, i) => {
            return this.renderSelectedItemView(item, i);
        })}
</div>

sortableGroupDecorator = componentBackingInstance => {
    if (componentBackingInstance) {
        let options = {
            draggable: ".rows",
            animation: "150",
            onEnd: evt => {
                let children = evt.to.children;
            }
        };
        Sortable.create(componentBackingInstance, options);
    }
};

官方文档地址：https://github.com/SortableJS/Sortable
demo演示地址：SortableJS

大路宽宽

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
拖拽插件SortableJS的简单使用

在项目中，经常会遇到一些涉及到拖拽的需求，github上面有一个开源的SortableJS的插件，支持Vue，React，Angular等多种框架，实现效果很好，基本可以满足大部分的需求，下面就第一次在jquery中的使用做个简单的demo记录。引入文件Sortable.min.js 指定包裹容器的id 根据api开始创建使用即可<!DOCTYPE html><html> <head> <meta charset="utf-8"..
复制链接

扫一扫

专栏目录