<!DOCTYPE>

 <html lang="zh-cn">

 <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>拖拽排序</title>

      <style>

           .sortable-ghost {

                opacity: 0.4;

                background-color: #F4E2C9;

           }

           .block__list li {

                cursor: pointer;

           }

      </style>

 </head>

 <!--      <link href="app.css" rel="stylesheet" type="text/css"/>

       -->

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

 <script src="https://cdn.bootcss.com/Sortable/1.8.3/Sortable.js"></script>

 <body>

      <ul id="foo" class="block__list block__list_words">

           <li>1</li>

           <li>2</li>

           <li>3</li>

           <li>4</li>

           <li>5</li>

           <li>6</li>

           <li>7</li>

           <li>8</li>

      </ul>

      <script>

           Sortable.create(document.getElementById('foo'), {

                animation: 150, //动画参数

                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('onSort.foo:', [evt.item, evt.from]);

                },

                onEnd: function (evt) { //拖拽完毕之后发生该事件

                     console.log('onEnd.foo:', [evt.item, evt.from]);

                }

           });

      </script>

 </body>

 </html>

js 实现拖拽排序的更多相关文章

  1. html5 Sortable.js 拖拽排序源码分析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http:// ...

  2. dragsort html拖拽排序

    一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...

  3. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  4. ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）

    ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...

  5. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  6. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  7. react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序）

    表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...

  8. jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）

    现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...

  9. 移动端的拖拽排序在react中实现 了解一下

    最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...

随机推荐

  1. xcode的打包上线出问题：导入此构建版本时出错

    原因:升级mac系统到了High sierra(10.13,目前还是测试版,并没有正式版,全新的文件系统 APFS (Apple File System))发现没有这个问题,于是乎,所以给出这种解决方 ...

  2. 第十三次作业——回归模型与房价预测&第十一次作业——sklearn中朴素贝叶斯模型及其应用&第七次作业——numpy统计分布显示

    第十三次作业——回归模型与房价预测 1. 导入boston房价数据集 2. 一元线性回归模型,建立一个变量与房价之间的预测模型,并图形化显示. 3. 多元线性回归模型,建立13个变量与房价之间的预测模 ...

  3. maven快速自动更新子模块项目的版本号

    当一个版本发布,新起一个版本时,我们需要更改一下项目中的版本号.一个maven工程,如果只是一个单一的主项目,那么只要手动修改一下 pom.xml 就 可以了,耗不了多少时间.但是如果这个maven项 ...

  4. 初学者--oracle安装完后出现的一些问题

    对于初学者安装数据库后,立马回运行数据库,看是否安装成功,但oracle安装完成,其中有些都是默认状态,所以需要手动修改和添加.例如这个问题 1.pl/sql developer was not te ...

  5. (转)ArcGIS Runtime for Android 使用异步GP服务绘制等值线

    关于基于Android上ArcGIS Server GP服务的调用,已经有前辈给出了很好的例子: http://blog.csdn.net/esrichinacd/article/details/92 ...

  6. python+appium 自动化2--元素定位uiautomatorviewer

    出处:https://www.cnblogs.com/yoyoketang/p/6128741.html 前言: 可以打开手机上的app了,下一步元素定位uiautomatorviewer,通过定位到 ...

  7. tcl实现批量压缩文件夹

    tcl脚本本身对字符串的处理比较简单,所以想着用这个也实现下: proc main {} { puts "请输入路径:" set strpath "E:\\123&quo ...

  8. Vue中通过v-for动态添加图片地址

    由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli ...

  9. 【5】用vector进行直接插入排序

    百分百自己编的程序,越来越觉得编程很好玩了. 但这算是第一次自己用vector这种不是那么无脑的方法编程,只能最多对3个数进行排序wwwww 今天我要回去搬宿舍了,等明天有时间,我一定要把bug找到! ...

  10. （原创）列主元Gauss消去法的通用程序

    import numpy as np np.set_printoptions(precision=5) A = np.array([[31., -13., 0., 0., 0., -10., 0., ...