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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>移动端多个DIV拖拽</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .container {
  12.             height: calc(100vh);
  13.             overflow: hidden;
  14.         }
  15.         .container ul {
  16.             width: 100%;
  17.             height: 100%;
  18.             position: relative;
  19.         }
  20.         .container li {
  21.             list-style: none;
  22.             width: 180px;
  23.             height: 180px;
  24.             background: #f00;
  25.             position: absolute;
  26.             top: 0;
  27.             left: 0;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.  
  33. <div class="container">
  34.     <ul id="list">
  35.         <li></li>
  36.         <li></li>
  37.         <li></li>
  38.         <li></li>
  39.         <li></li>
  40.     </ul>
  41. </div>
  42.  
  43. <script>
  44.     window.onload = function(){
  45.  
  46.         var list = document.querySelector('#list');
  47.         var lis = list.getElementsByTagName('li');
  48.         var startX = 0, startY = 0;
  49.  
  50.         for(let i=0; i<lis.length; i++){
  51.             var posL = i * 200;
  52.             lis[i].style.left = posL + 'px';
  53.         }
  54.  
  55.         for(let i=0; i<lis.length; i++){
  56.             var that = this;
  57.             lis[i].addEventListener('touchstart', function(e){
  58.                 console.log(e);
  59.                 startX = e.targetTouches[0].pageX - this.offsetLeft;
  60.                 startY = e.targetTouches[0].pageY - this.offsetTop;
  61.             });
  62.  
  63.             lis[i].addEventListener('touchmove', function(e){
  64.                 console.log(e);
  65.                 var leftX = e.targetTouches[0].pageX - startX;
  66.                 var topY = e.targetTouches[0].pageY - startY;
  67.                 var parentW = e.targetTouches[0].target.offsetParent.clientWidth;
  68.                 var parentH = e.targetTouches[0].target.offsetParent.clientHeight;
  69.                 var thisW = e.targetTouches[0].target.clientWidth;
  70.                 var thisH = e.targetTouches[0].target.clientHeight;
  71.                 var l = parentW - thisW;
  72.                 var t = parentH - thisH;
  73.  
  74.                 if(leftX <= 0){
  75.                     leftX = 0;
  76.                 }
  77.  
  78.                 if(leftX >= l){
  79.                     leftX = l;
  80.                 }
  81.  
  82.                 if(topY <= 0){
  83.                     topY = 0;
  84.                 }
  85.  
  86.                 if(topY >= t){
  87.                     topY = t;
  88.                 }
  89.  
  90.                 this.style.left = leftX + 'px';
  91.                 this.style.top = topY + 'px';
  92.             });
  93.         }
  94.     };
  95. </script>
  96.  
  97. </body>
  98. </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. Git撤销&回滚操作(git reset 和 get revert)

    转自:https://blog.csdn.net/asoar/article/details/84111841 git的工作流 工作区:即自己当前分支所修改的代码,git add xx 之前的!不包括 ...

  2. Struts中整合的强大Ognl学习（一）

    测试使用了一个JavaBean的User,User中的Address单独封装再形成了一个JavaBean: 为了测试静态方法和静态变量调用,写了一个Util方法: 因为测试Ognl功能过多所以直接使用 ...

  3. 设计模式<一>

    设计原则1.找出应用中可能需要变化之处,把它们独立出来,不要和那些不需要变化的代码混在一起. 2.针对接口编程,而不是针对实现编程. 3.多用组合,少用继承. 一:策略模式,定义了算法族,分别封装起来 ...

  4. 刷题-力扣-113. 路径总和 II

    113. 路径总和 II 题目链接 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/problems/path-sum-ii 著作权归领扣网络所有.商业转载请联系 ...

  5. Spring系列之不同数据库异常如何抽象的？

    前言 使用Spring-Jdbc的情况下,在有些场景中,我们需要根据数据库报的异常类型的不同,来编写我们的业务代码.比如说,我们有这样一段逻辑,如果我们新插入的记录,存在唯一约束冲突,就会返回给客户端 ...

  6. hibernate关联关系(一对多)

    什么是关联(association)关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性.例如: class B{ private String name; } pub ...

  7. adb 常用命令大全（7）- 其他实用功能

    屏幕截图 adb exec-out screencap -p > sc.pn 截图保存到电脑执行该命令的目录下 如果指定文件名以 .png 结尾时可以省略 -p 参数 注意 如果 adb 版本较 ...

  8. 【Python从入门到精通】（二十五）Python多进程的使用

    您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本篇重点介绍Python多进程的使用,读者朋友们可以将多进程和多线程两者做一个对比学习. 干货满满,建议收藏,需要用到时常看看. 小伙伴们如有问题 ...

  9. openswan中ISAKMP交互过程关键函数接口

    1. ISAKMP交互过程中关键函数接口 下面分别说明不同的阶段和模式下的函数接口以及对应的报文. 2. 第一阶段(Phase I)主模式函数接口 发送端 响应端 main_outI1 主模式第一包 ...

  10. 大数据最后一公里——2021年五大开源数据可视化BI方案对比

    个人非常喜欢这种说法,最后一公里不是说目标全部达成,而是把整个路程从头到尾走了一遍. 大数据在经过前几年的野蛮生长以后,开始与数据中台的概念一同向着更实际的方向落地.有人问,数据可视化是不是等同于数据 ...