html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/Sortable.min.js"></script> //拖放+排序 Sortable.create(simpleList, { animation: 150, //动画参数 onSort: function(evt) { // console.log(settings.rowNum

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的.   本帖属于原创,转载请出名出处. 官网http://rubaxa.github.io/Sortable/ 技术交流qq群 302817612 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上    ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件

基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragover_handler(event);"> <li draggable="true" ondragstart="dragstart_handler(event);">1</li> <li draggable="tru

先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的年夜饭. 说吧,人家在上班,我在家里过年,那肯定就不同步了. 不同步会发生什么? 拖拽组件 大概三四个月以前,我写了一篇<「实战」React实现的拖拽组件>,只不过,这个组件比较基础,仅仅支持电脑端的使用,而且不能支持拖拽排序,显然不是很符合要求. 也尝试找了几款组件,想改吧改吧就上了,但是一些组

jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜单. GitHub地址: https://github.com/camohub/jquery-sortable-lists js代码: var options = { placeholderCss: {'background-color': '#ff8'}, hintCss: {'backgroun

定义css, 两个动画 .drag-up { -webkit-animation: dragup ease 0.2s 1; animation: dragup ease 0.2s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: red; } .drag-down { -webkit-animation: dragdown ease 0.2s 1; animatio

1.实现目标:目标是输入一个数组,生成一个列表:通过拖拽排序,拖拽结束后输出一个经过排序的数组. 2.实现思路: 2.1是使用HTML5的drag功能来实现,每次拖拽时直接操作Dom节点排序,拖拽结束后再根据实际的dom节点遍历得出新的数组. 2.2使用mousedown,mouseover等鼠标事件来实现,每次监听事件时,仅改动列表项的样式transform,而不操作实际的dom顺序.拖拽结束时,根据transform计算数组项顺序,得出新数组用vue数据驱动的方式重绘列表,重置所有样式. 总

一.Jquery List DragSort 对于有些页面,如首页的定制,需要进行动态的拖拽排序.由于自己实现比较困难,我们一般会使用一些js插件来实现.dragsort 就是帮助我们完成这一需求.通过dragsort我们可以很方便地对html页面上的素动态地推拽,进行排序.dragsort是一个jquery插件,我们使用起来非常方便.dragsort网站为:dragsort下载地址为:http://dragsort.codeplex.com/ .下载dragsort之后,解压如下图所示, 我们

在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需要说明的是排序的实现. 我们先来看看关键的页面代码: <div class="row"> <div class="col-lg-12 full-width" id="leftMenus"> <div class=&quo

效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的功能. 实现的代码非常简单我们只需要两步: 实例化一个ItemTouchHelper 关联到RecyclerView 恩,就是这么简单. 构造方法中需要一个ItemTouchHelper.Callback,ItemTouchHelper会在拖拽的时候回调Callback中相应的方法,我们只需在Cal

ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样,仅仅是范围缩小了一些,多了一些推断而已.以下是每一层的代码.还是採取仅仅贴出功能代码.由于这个拖拽排序功能我感觉非常不错,所以单独拿出一篇博客来展示,也方便理解. Jsp页面实现功能的js代码例如以下: //拖拽前运行 var dragId; function beforeDrag(treeId,

所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left}   ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left}   ui.item - 表示当前拖拽的元素   ui.placeholder - 占位符(如果有定义的话)   ui.sender

ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首先是搭建框架,此处的ListView列表相似于QQ消息列表,当然数据不过模拟,为了简单起见,没有把ListView的条目的所有的属性所有写上.首先是消息的实体类Msg.java: package me.chenfuduo.mymsgdrag; public class Msg { private i

前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比如自定义一个tree传入ztree, 不使用ztree的识别字段,而是使用自定义字段,然后当ztree的节点发生变化时,维护这些自定义字段,从而使得整个tree是有序的,并支持拖拽. 上边的这个解决方案,有一个问题,就是使用javascript构造的tree,传入ztree之后,会发生堆栈溢出,初步

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHelper是一个工具类,可实现侧滑删除和拖拽移动,使用这个工具类需要RecyclerView和Callback.同时根据需要重写onMove和onSwiped方法. 使用步骤 一.项目组织结构图 注意事项: 1.  导入类文件后需要change包名以及重新import R文件路径 2.  Values目

列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题 如何实现才能达到效率最高呢 先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都会影响到其他数据 例如把最后一条拖到最前面,那么后面九条就自动往后移,反之也是,嗯~~~ 先想象一下,排序号是固定的,就好像有十把椅子,每个椅子都是固定在那里的,移动的是上面的人,这样就不会影响到其他页面的数据了 而且每个人换的也是之前其他人的桌椅号码,这样也不用去想到底要加多少才能排在哪里. 接口

<!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-colo

在研究项目中的一个效果的时候,查找资料过程中发现有人有这么一种需求,就是GridView在实现拖拽排序的基础上,如果是两个GridView之间实现拖拽效果,并要实现数据交互. 一.效果图: 实现这个效果需要考虑的事情: ① 这个UI整体的构建以及事件的传递 ② 如何实现View的共享,穿过边界 二.实现思路: 对于单个GridView的拖拽效果实现是参考网上的一篇文章,很抱歉没能及时保存地址,所以这里就不贴了. 整体实现: 一个容器(DragChessView)里放置两个DragView(可拖拽

效果就是这样,RecyclerView列表可拖拽排序,可删除,可添加: RecyclerView给我们提供了一个手势器: ItemTouchHelper helper = new ItemTouchHelper(new ItemTouchHelper.Callback() { @Override public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) { int drag

odoo列表tree视图 拖拽排序 实现效果: 实现方式: 模型中定义字段: class CusYourModel(models.Model): """ 你的模型 """ _name = 'xxxxxxx' _order = "sequence, id" sequence = fields.Integer(string='Sequence') 前端view视图增加相应字段: <tree string="xxxx