移动端多个DIV简单拖拽功能。

　　这个demo与之前写的一个例子差不了多少，只是这个多了一层遍历而已。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>移动端多个DIV拖拽</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .container {

            height: calc(100vh);

            overflow: hidden;

        }

        .container ul {

            width: 100%;

            height: 100%;

            position: relative;

        }

        .container li {

            list-style: none;

            width: 180px;

            height: 180px;

            background: #f00;

            position: absolute;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body>

<div class="container">

    <ul id="list">

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

<script>

    window.onload = function(){

        var list = document.querySelector('#list');

        var lis = list.getElementsByTagName('li');

        var startX = 0, startY = 0;

        for(let i=0; i<lis.length; i++){

            var posL = i * 200;

            lis[i].style.left = posL + 'px';

        }

        for(let i=0; i<lis.length; i++){

            var that = this;

            lis[i].addEventListener('touchstart', function(e){

                console.log(e);

                startX = e.targetTouches[0].pageX - this.offsetLeft;

                startY = e.targetTouches[0].pageY - this.offsetTop;

            });

            lis[i].addEventListener('touchmove', function(e){

                console.log(e);

                var leftX = e.targetTouches[0].pageX - startX;

                var topY = e.targetTouches[0].pageY - startY;

                var parentW = e.targetTouches[0].target.offsetParent.clientWidth;

                var parentH = e.targetTouches[0].target.offsetParent.clientHeight;

                var thisW = e.targetTouches[0].target.clientWidth;

                var thisH = e.targetTouches[0].target.clientHeight;

                var l = parentW - thisW;

                var t = parentH - thisH;

                if(leftX <= 0){

                    leftX = 0;

                }

                if(leftX >= l){

                    leftX = l;

                }

                if(topY <= 0){

                    topY = 0;

                }

                if(topY >= t){

                    topY = t;

                }

                this.style.left = leftX + 'px';

                this.style.top = topY + 'px';

            });

        }

    };

</script>

</body>

</html>

移动端多个DIV简单拖拽功能的更多相关文章

  1. JS实现多Div模块拖拽功能

    空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...

  2. Unity UGUI 实现简单拖拽功能

    说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...

  3. WPF简单拖拽功能实现

    1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指 ...

  4. jquery实现对div的拖拽功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  6. DIV 实现可拖拽 功能（留档）

    //可拖拽 功能 $.fn.extend({    //用法:$(element).jqDrag();    //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果    ...

  7. JQuery UI的拖拽功能

    JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

  8. JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...

  9. js进阶 12-17 jquery实现鼠标左键按下拖拽功能

    js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...

随机推荐

  1. Kafka客户端内存缓冲GC处理机制--客户端内存

    1.Kafka的客户端缓冲机制 首先,先得给大家明确一个事情,那就是在客户端发送消息给kafka服务器的时候,一定是有一个内存缓冲机制的. 也就是说,消息会先写入一个内存缓冲中,然后多条消息组成了一个 ...

  2. go协程调度

    目录 前言 1. 线程池的缺陷 2.Goroutine 调度器 3.调度策略 3.1 队列轮转 3.2 系统调用 3.3 工作量窃取 4.GOMAXPROCS设置对性能的影响 参考 前言 Gorout ...

  3. redis集群访问，重启，关闭，带密码访问集群

    安装ruby后查找如下文件  vi  进去后编辑 此处编写自己的密码,重启后便可带密码访问集群 随便选择一个节点输入如下指令查看集群信息 正常关闭redis命令如下: 重启redis集群再次以相同的命 ...

  4. Mysql索引最佳实践笔记0524

    #mysql5.7 innodb默认存储引擎 一.关于索引二.最佳实践三.避坑实践 一.关于索引 1.索引的作用 -提高查询效率 -数据分组.排序 -避免回表查询 -优化聚集查询 -用于多表join关 ...

  5. 移动端ios上下滑动翻页事件失效

    移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...

  6. Sentry-CLI 使用详解(2021 Sentry v21.8.x)

    内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/ 系列 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创 ...

  7. Selenium系列（十九） - Web UI 自动化基础实战（6）

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  8. Vue Abp vNext获取当前登录用户

    系统默认提供了获取当前用户的api方法 https://localhost:44364/api/identity/my-profile 手工实现方法:abp后台获取当前用户需要在AppService应 ...

  9. HTTP快速入门

    一.tomcat端口号设置为80,访问时候可以不加:http协议1.1版本可以复用连接,请求结束后会稍微等会: 二. 表单,get方式提交: 三.user-agent告诉服务器是哪个浏览器,代码中解决 ...

  10. python库--tensorflow--数学函数

    官方API(需FQ) 中文API 方法 返回值类型 参数 说明 算数运算符 .add() Tensor x, y, name=N 加法(若x,y都为tensor, 数据类型需一致, 以下所有x,y都如 ...