文档章节

移动端拖拽排序

十万猛虎下画山
 十万猛虎下画山
发布于 2016/11/30 18:07
字数 832
阅读 94
收藏 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还靠谱些..

 

笨死算逑!!!

© 著作权归作者所有

共有 人打赏支持
十万猛虎下画山
粉丝 4
博文 102
码字总数 71679
作品 0
西城
程序员
私信 提问
一步步实现一个自适应的react-native拖拽排序

最近由于业务需求需要实现一个功能需要实现图片的上传和排序和删除,在网上搜索了几款发现都需要固定列数,感觉不太友好,所以自己实现了一个可以不需要设定列数的排序,而且布局高度实现自适...

mochixuan
08/08
0
0
jquery ui --排序(Sortable)移动位置

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

一色琉璃
2016/01/11
1K
1
SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

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

葡萄城控件技术团队
2017/12/08
316
2
玩转iOS开发:iOS 11 新特性《UICollectionView的拖拽》

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

CainLuo
2017/11/29
0
0
HTML5拖拽API实现vue树形拖拽组件

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

花卷爱学习
05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

爬虫教程」Python做一个简单爬虫,小白也能看懂的教程

俗话说“巧妇难为无米之炊”,除了传统的数据源,如历史年鉴,实验数据等,很难有更为简便快捷的方式获得数据,在目前互联网的飞速发展写,大量的数据可以通过网页直接采集,“网络爬虫”应运...

糖宝lsh
今天
1
0
KEIL MDK工程中的宏定义:字符,值,字符串

下图中定义了2个宏: 等效于文件中: #define MCU_FLASH_LESSTHAN_64K #define VERSION_INFO_hw 'a' // MDK :VERSION_INFO_hw="'a'" 即MDK中的VERSION_INFO_hw="'a'" 和 #define VERS......

SamXIAO
今天
0
0
集合的最优子集划分

问题描述:如何将一个个数为n的集合N划分为为若干个子集N1…Nk,其中1≤k≤n,计算出每个子集的最优结果R1…Rk,使得F(R1…Rk)为最优的结果。 这个问题可以分成3步解决: 求出集合所有子集 ...

laolin23
今天
0
0
JavaScript实现在线Markdown编辑器、转换HTML工具-toolfk程序员工具网

本文要推荐的[ToolFk]是一款程序员经常使用的线上免费测试工具箱,ToolFk 特色是专注于程序员日常的开发工具,不用安装任何软件,只要把内容贴上按一个执行按钮,就能获取到想要的内容结果。T...

toolfk
今天
2
0
Source Tree 在git 密码更新后,无法拉取代码的解决办法

背景: git 密码总是需要修改。在修改代码后,拉去代码, source tree 总提示access denied. 解决方法:重新修改git 仓库对应的密码。 for mac:应用程序 -》 钥匙串 -》 搜索 source tre...

Carlyle_Lee
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部