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

  1. 引入文件Sortable.min.js
  2. 指定包裹容器的id
  3. 根据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>

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

.

拖拽插件SortableJS的更多相关文章

  1. jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-inde ...

  2. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  3. JQuery之拖拽插件

    一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得 ...

  4. 一步一步实现JS拖拽插件

    js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠 ...

  5. vue拖拽插件（弹框拖拽）

    // =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...

  6. 自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...

  7. 好用的JS拖拽插件

    下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.ty ...

  8. jquery拖拽插件 tableDnD

    http://www.jb51.net/article/39481.htm http://www.poluoluo.com/jzxy/201307/232615.html

  9. jq拖拽插件

    (function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffset ...

随机推荐

  1. Redis与Mysql双写一致性方案解析

    一 前言 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用.在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作 但是在更新缓存方面,对于更新完数据库,是更新缓存呢,还是删除缓存 ...

  2. 2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础

    2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...

  3. element-ui 开发备忘

    目录 购物清单的数据结构说明 1. <el-radio> 的 label 属性 2. 在 <el-table> 中放入表单组件 3. 表单验证时填写正确的 prop 属性 总结 ...

  4. LOJ2336 JOI2017 绳 贪心、构造

    传送门 首先显然的是可以一开始先染好再做.每个点只会被染一次.最后只剩下两种颜色. 接下来是结论时间:序列可以反转的充要条件是除了首尾的极大颜色连通块以外其他极大颜色连通块长度为偶数. 证明充分性:考 ...

  5. -Shell 命令行工具 Cmder Babun Zsh MD

    目录 目录 Cmder:window 下增强型的 cmd + bash 简介 配置 解决中文乱码问题 添加到右键菜单 添加至环境变量 修改命令提示符号 自定义aliases Readme.md 设置c ...

  6. Linux学习笔记之vim操作指令大全

    0x00 关于Vim Vim是款强大的文本编辑器,但是众多指令需要学习,这次记录了指令大全方便以后翻阅. Vim的几种模式 正常模式:可以使用快捷键命令,或按:输入命令行. 插入模式:可以输入文本,在 ...

  7. 创建一个RAS 非对称 公私密钥示例

    static void Main(string[] args) { RSAParameters pub; RSAParameters priv; using (var rsa = new RSACry ...

  8. c# winform结合数据库动态生成treeview的父节点和子节点方法和思路

    tb_food表的结构如图一: tb_foodtype表的结构如图二: //获取tb_foodtype表中的所有数据 private void InitDataTable() { SqlConnect ...

  9. .net平台下对C#代码的编译

    最近赶项目忽然想到一个问题,那就是在 .Net平台下的C#代码是怎么从源代码到机器可以识别的电脑的(只怪自己上学不好好读书,现在又要重补一遍了!!!) 话不多说直接上调研结果: 预习知识: 1: IL ...

  10. 简约而不简单的Django2.2 新手图文教程

     欢迎大家访问我的个人网站<刘江的博客和教程>www.liujiangblog.com  主要分享Python 及Django教程以及相关的博客! 版权所有,转载需注明来源! 2019年7 ...