js 实现拖拽排序
<!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 实现拖拽排序的更多相关文章
- html5 Sortable.js 拖拽排序源码分析
最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http:// ...
- dragsort html拖拽排序
一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通 ...
- jQuery可拖拽排序列表jquery-sortable-lists
jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...
- ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）
ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...
- jquery sortTable拖拽排序
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ...
- zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
- react拖拽(表格拖拽排序、普通拖拽排序以及树形拖拽排序）
表格拖拽排序:组件地址:https://reactabular.js.org/#/drag-and-drop 拖动的排序是用React-DnD:React-DnD:http://react-dnd.g ...
- jquery拖拽排序，针对后台列表table进行拖拽排序（超实用！）
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码, ...
- 移动端的拖拽排序在react中实现 了解一下
最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...
随机推荐
- java 随机生成6位短信验证码
生成6位随机数字其实很简单,只需一行代码,具体如下: String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000) ...
- ubuntu系统 不能访问非系统磁盘即挂载的数据盘 Unable to access "DATA"
问题描述: ubuntu14.04 有两个硬盘,一个固态硬盘作为系统盘,一个机械硬盘作为数据盘. 打开 数据盘“DATA”时出现下面的错误: Unable to access "DATA&q ...
- 1 实现添加功能 1.1 定义一个学员类（Student），在Student类中定义姓名、性别和年龄属性，定义有 参数的构造方法来初始化所以的成员属性 1.2 创建学员类对象来存放学员信息，并且为每一个学生对象添加的相应的编号。并将 学员类对象添加到Map<Integer,Student>集合中 1.3 添加完成后，显示所有已添加的学员姓名 1.4 限制年龄文本框只能输入正整数,否则的会采
学生类 package com.lanxi.demo1_3; public class Student { private String name; private String sex; priva ...
- jsp页面传中文到后台乱码怎么办？
一般从前台传值到后腰如果传的值是中文的话,又不用post传值方式,到后台显示会显示成乱码的形式.所以以下方法亲测有效防止乱码. 前台jsp页面: var taskTitle = $('#taskTit ...
- vue爬坑：把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化
今天做项目碰到了 一个坑,一个vue变量赋值给一个新的变量,对这个新的变量里的值做更改,vue的变量也变了.记录一下这个坑坑~~ 然后百度搜到了一个解决方案: 就是把变量先转成字符串,再把字符串转成对 ...
- change事件同一文件多次选中
最近在做图片上传的时候,碰到了一点问题,那就是选择内容相同,change事件执行不了 网上搜索了答案,使用off('change')好像也不行 最终找到一种解决办法 使用replaceWith重置in ...
- 自学python之路（day2）
1. 格式化输出 %表示占位符 ,s表示字符串 ,d表示数字,%s就是代表字符串占位符,%d,是数字占位符 示例1:输入用户的姓名.性别.年龄.爱好的通用模板 name = input("请 ...
- 2018-2019-2 《网络对抗技术》Exp1 PC平台逆向破解 20165326
实验一 目录 直接修改程序机器指令,改变程序执行流程 通过构造输入参数,造成BOF攻击,改变程序执行流 注入Shellcode并执行 问题及解决 思想感悟 一.修改机器指令 首先你需要一个pwn1文件 ...
- matlab json文件解析 需要下载一个jsonlab-1.5
% facebookX24.m clc; addpath('C:\Program Files\MATLAB\R2015b\toolbox\jsonlab-1.5'); % read .json jso ...
- EOJ Monthly 2019.2 题解(B、D、F)
EOJ Monthly 2019.2 题解(B.D.F) 官方题解:https://acm.ecnu.edu.cn/blog/entry/320/ B. 解题 单测试点时限: 2.0 秒 内存限制: ...