文档章节

移动端拖拽排序

十万猛虎下画山
 十万猛虎下画山
发布于 2016/11/30 18:07
字数 832
阅读 83
收藏 0
点赞 0
评论 0

 

var drag = {
        bindDragEvent: function (isF) {
            var father = document.getElementById("public_theme_list");//父容器
            var btns = father.getElementsByClassName("public-drag-btn");//事件源对象
            var items = father.getElementsByClassName("item");//拖拽目标

            for (var i = 0; i < items.length; i++) {
                items[i].index = i;//给拖拽目标加index属性
                if (isF) {//是否是第一次绑定
                    drag.bindTouchEvent(btns[i], items[i], items);
                }else{
                    if (items[i].getAttribute("data-isBind") == "yes") {//如果是需要绑定的再绑定事件
                        items[i].removeAttribute("data-isBind");
                        drag.bindTouchEvent(btns[i], items[i], items);
                    }
                }
            }

            /*
            * 1.循环绑定事件
            * 2.用分支绑定是为了避免重复绑定事件 造成重复调用的BUG
            * */
        },
        bindTouchEvent: function (ele, target, items) {
            var dragObj = target;//拖拽目标
            var btn = ele;//事件源对象
            var canMove = true;
            var startY, direction;

            btn.addEventListener("touchstart", touchStart, false);

            function touchStart(event) {
                dragObj.className = "item draging";
                /*
                 * .draging
                * 当手指触摸时给个 拖拽中的效果
                * transform:scale(0.8,0.8);
                * z-index: 999;
                * transition: all 1s;
                * */

                startY = event.touches[0].clientY;//记录初次触摸位置 用以判断移动方向
                dragObj.addEventListener("touchmove", touchMove, false);//给拖拽目标绑定touchmove 因为要操作拖拽目标
            }


            function touchMove(event) {
                var i = dragObj.index;//用到index
                if (event.touches[0].clientY < startY && canMove) {
                    /*移动<开始  就是向上移动
                     *canMove是在完成效果后禁止再向下移动
                     * 也就是说用户移动一次就确定方向了 禁止先 拖到上方,在拖到下方
                    * */
                    if (i != 0) {//如果不是第一个项
                        direction = 1;//有效1 up
                        dragObj.className = "item draging up";
                        /*
                        * .up
                        *  transform: translate3d(20px,-100%,10px)
                        *  给一个自身向上移动百分百
                        * */
                        items[i - 1].className = "item draging down";
                        /*当前被拖拽目标的上一个项 给一个向下移动的动效
                        * .down
                        *  transform: translate3d(20px,100%,10px)
                        * */
                        canMove = false;
                    }
                }
                else if (event.touches[0].clientY > startY && canMove) {
                    direction = 0;//向下移动
                    dragObj.className = "item draging down";
                    items[i + 1].className = "item draging up";
                    canMove = false;
                }
                dragObj.addEventListener("touchend", touchEnd, false);
            }

            function touchEnd() {
                var father = document.getElementById("public_theme_list");
                var clone = null;//克隆空对象
                var i = dragObj.index;
                var newItems;
                dragObj.className = "item";//清除拖拽目标移动效果
                clone = dragObj.cloneNode(true);//克隆移动目标
                if (direction) {
                    //向上
                    items[i - 1].className = "item";//当前被拖拽目标的上一个项 给一个向下移动的动效
                    clone.index = i - 1;//给克隆对象index 为当前上一个项index
                    items[i - 1].index = i + 1;//拖拽对象前上一个项index+1

                    clone.setAttribute("data-isBind","yes");//dom 不能克隆事件 所以在递归的时候要给克隆绑定事件

                    father.insertBefore(clone,items[i - 1]);
                    /*将克隆对象插入当前拖拽目标 前一项之前*/
                    newItems = father.getElementsByClassName("item");
                    /*因为新增了项 所以获取新项数组*/
                    father.removeChild(newItems[i + 1]);
                    /*删除当前拖拽项*/
                }
                else {
                    items[i + 1].className = "item";
                    clone.index = i + 1;
                    clone.setAttribute("data-index", i + 1);
                    items[i + 1].index = i;
                    items[i + 1].setAttribute("data-index", i);

                    clone.setAttribute("data-isBind","yes");

                    father.insertBefore(clone, items[i + 2]);
                    newItems = father.getElementsByClassName("item");
                    father.removeChild(newItems[i]);
                }

                drag.bindDragEvent(false);//递归调用
            }
        }
    };

    drag.bindDragEvent(true);

 

其实应该还有一段AJAX代码,是将排序后的顺序index  POST给服务器记录下来,用户再次进入之后会根据token区分用户,显示不同的顺序。

 

一开始没有思路,其实最怕写的就是多媒体和触摸拖拽相关的代码了。

但是没办法,项目驱动学习啊~

自己死笨死笨的。。。这点代码从想思路,到写,到试错,整整6个小时。。。笨死我算了

不过学习了很多东西,没有用h5拖拽,是因为考虑兼容问题,主要是在webView 里跑,js还靠谱些..

 

笨死算逑!!!

© 著作权归作者所有

共有 人打赏支持
十万猛虎下画山
粉丝 2
博文 83
码字总数 46135
作品 0
西城
程序员
jquery ui --排序(Sortable)移动位置

新人刚接触这个jquery ui的能拖拽的排序 请问下 在我拖拽完了后 怎么能知道他向上或者下拖拽了几行 嗯 说白了就是定位下位置 因为要去改排序 让他拖拽完了后数据库里也变样的 请问下Sortabl...

一色琉璃 ⋅ 2016/01/11 ⋅ 1

HTML5拖拽API实现vue树形拖拽组件

因业务场景需要一个可拖拽修改节点位置的树形组件,因此动手撸了一个,乘此机会摸了一把html5原生拖拽。近期有时间将核心部分代码抽出,简单说下实现方式。 1.树形结构-组件递归使用 树形结构...

花卷爱学习 ⋅ 05/10 ⋅ 0

玩转iOS开发:iOS 11 新特性《UICollectionView的拖拽》

文章分享至我的个人技术博客: cainrun.github.io/15102983446… 还记得在的时候, 苹果爸爸展示的拖拽功能是多么的牛逼, 实现了可夸应用的数据分享. 如果你有看过之前的玩转iOS开发:iOS 11 ...

CainLuo ⋅ 2017/11/29 ⋅ 0

Swift开发:仿Clear手势操作(拖拽、划动、捏合)UITableView

这是一个完全依靠手势的操作ToDoList的演示,功能上左划删除,右划完成任务,拖拽调整顺序,捏合张开插入。 项目源码: https://github.com/luan-ma/ClearStyleDemo.Swift 初始化 TDCToDoIte...

luan.ma ⋅ 2016/01/03 ⋅ 0

SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

日前,全球最大的控件提供商葡萄城宣布,SpreadJS 纯前端表格控件正式发布V11 版本。新版本亮点颇多,不但为用户带来期待已久的图表功能,还新增前端导出 PDF、列分组等功能,在数据可视化方...

葡萄城控件技术团队 ⋅ 2017/12/08 ⋅ 2

JQuery Tree插件——zTree v2.3 2011 首次发布

迎接一个崭新的2011,特发布 zTree v2.3 正式版。这次修正的 Bug 主要是针对拖拽问题,并且将拖拽的功能做了一定的调整;同时还专门增加了自定义控件的接口,用户可以随心所欲使用zTree了。 ...

zTree ⋅ 2011/01/04 ⋅ 8

KodExplorer 4.06 发布,全面开放,支持完整插件模式

KodExplorer 4.06 发布了。KodExplorer可 道云,原名芒果云,是基于 Web 技术的私有云和在线文件管理系统,它提供了类windows经典用户界面,一整套在线文件管理、文件预览、编辑、上传下载、...

雾渺 ⋅ 2017/09/01 ⋅ 10

报表解决方案Stimulsoft Reports.Ultimate v2016.2发布|附下载

Stimulsoft Reports.Ultimate 2016.2下载 新特性: Java数据库适配器 JSONDatabase数据库的JSONDatabase属性 对WebViewer & WebDesigner的Java Server Faces支持 新的Web Viewer组件支持详述...

鸟栖沙岩 ⋅ 2016/10/26 ⋅ 0

原生Javascript+HTML5一步步实现拖拽排序

前言 本文的内容就如题所述,之所以写这么个东西是有原因的,因为这两天重做公司的一个功能发现里面需要一个拖拽排序的功能.以前都是使用jquery各种插件去搞,因为这个项目不限制浏览器兼容问题...

顽Shi ⋅ 2014/04/05 ⋅ 6

一个可拖拽的React标签组件

最近的项目里需要实现一个标签组件,内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。 较为知名的是react-dnd,然而它似乎只支持把一个元素移到固...

YGYOOO ⋅ 05/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

懒惰根本就不存在

简评:芝加哥大学心理学教授,懒惰根本就不存在。(本文表面讲行为心理学实则讲教育) 金句:以好奇而不是判断来回应一个人的无效行为,是非常有帮助的。 本文「我」代表原作者 E Price。 自...

极光推送 ⋅ 30分钟前 ⋅ 0

Excel提取单元格中最后一个“.”后面的数据

java.lang.String ----- String =TRIM((MID(SUBSTITUTE(B2,".",REPT(" ",99)),(LEN(B2)-LEN(SUBSTITUTE(B2,".","")))*99,99)))...

klog ⋅ 32分钟前 ⋅ 0

mac远程桌面

下载安装remote-desktop-mac Mac beta 客户端 mac通过远程桌面访问windows服务器。

亚林瓜子 ⋅ 36分钟前 ⋅ 0

firrtl

动手---sbt(2)之后,再回头看 chisel第一个实验,根据 https://github.com/freechipsproject/firrtl 发现firrtl没有执行sbt assembly命令,重新执行这个命令,结果成功。如下图: joe@joe-As...

whoisliang ⋅ 40分钟前 ⋅ 0

NIO

一、通道(Channel):用于源节点与目标节点的连接。在 Java NIO 中负责缓冲区中数据的传输。Channel 本身不存储数据,因此需要配合缓冲区进行传输。 二、通道的主要实现类 java.nio.channel...

stars永恒 ⋅ 41分钟前 ⋅ 0

Android悬浮窗的实现

0. 前言   现在很多应用都使用到悬浮窗,例如微信在视频的时候,点击Home键,视频小窗口仍然会在屏幕上显示。这个功能在很多情况下都非常有用。那么今天我们就来实现一下Android悬浮窗,以...

猴亮屏 ⋅ 41分钟前 ⋅ 0

日志采集中的关键技术分析

概述 日志从最初面向人类演变到现在的面向机器发生了巨大的变化。最初的日志主要的消费者是软件工程师,他们通过读取日志来排查问题,如今,大量机器日夜处理日志数据以生成可读性的报告以此...

tqyin ⋅ 42分钟前 ⋅ 0

使用Navicat将数据导出为text文本 然后再导入

将数据导出为text文本效率很高 1. 准备工作 1.1 准备表结构 1.2 目标库 执行生成表结构sql 2.将表数据导出为text文本 生成的text文本 3. 目标库 导入text 4.效果...

Lucky_Me ⋅ 48分钟前 ⋅ 0

IntelliJ IDEA 乱码解决方案 (项目代码、控制台等)

文章介绍了idea下,项目乱码、控制台乱码及运行tomcat控制台乱码的解决方案,文章链接:https://www.cnblogs.com/vhua/p/idea_1.html

Funcy1122 ⋅ 51分钟前 ⋅ 0

IDEA使用sonarLint

一、IDEA如何安装SonarLint插件 1.打开 Idea 2.点击【File】 3.点击【Settings】 4.点击【Plugins】 5.在搜索栏中输入“sonarlint”关键字 6.点击【Install】进行安装 7.重启Idea 二、IDEA如...

开源中国成都区源花 ⋅ 56分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部