移动端多个DIV简单拖拽功能
移动端多个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简单拖拽功能的更多相关文章
- JS实现多Div模块拖拽功能
空闲时间,同事让帮忙整个JS拖拽div模块功能.于是便在网上搜索,总结如下一个可实现多div模块拖拽的功能.一下是整体的HTML代码, 里边可以控制到 拖拽开始(onStart),拖拽时候(onMov ...
- Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
- WPF简单拖拽功能实现
1.拖放操作有两个方面:源和目标. 2.拖放操作通过以下三个步骤进行: ①用户单击元素,并保持鼠标键为按下状态,启动拖放操作. ②用户将鼠标移到其它元素上.如果该元素可接受正在拖动的内容的类型,鼠标指 ...
- jquery实现对div的拖拽功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- DIV 实现可拖拽 功能(留档)
//可拖拽 功能 $.fn.extend({ //用法:$(element).jqDrag(); //element需要具备定位属性,需要手动调整层叠样式,这里只是修改鼠标拖动效果 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一.总结 一句话总结:监听的对象必须是文档,鼠标按下运行mousemove事件,鼠标松开取消mousemove事件的绑定,div的偏移的话是 ...
随机推荐
- 入门数据结构与算法,看这一个就够了,知识点+LeetCode实战演练
本笔记来自拉钩教育300分钟搞定算法面试 算法与数据结构 要掌握一种数据结构,就必须要懂得分析它的优点和缺点. 在考虑是否应当采用一种数据结构去辅助你的算法时,请务必考虑它的优缺点,看看它的缺点是否会 ...
- Django中的增删改查
1.model 假设我们的model如下: 某个JobType下有很多Job. class JobType(models.Model): name = models.CharField(max_len ...
- Git撤销&回滚操作(git reset 和 get revert)
转自:https://blog.csdn.net/asoar/article/details/84111841 git的工作流 工作区:即自己当前分支所修改的代码,git add xx 之前的!不包括 ...
- Spring第一课:依赖注入DI(二)
DI Dependency Injection ,依赖注入 is a :是一个,继承. has a:有一个,成员变量,依赖. class B { private A a; //B类依赖A类 } 依 ...
- vue 引用省市区三级联动(element-ui select)
npm 下载 axios npm install --save axios static 静态文件夹里 创建 json 文件夹 json 文件夹里创建 map.json map.json 文件里写 ( ...
- shutdown 命令
# shutdown -h #停止系统服务并关机 -r #停止系统服务后重启 shutdown -h now #立即关机 shutdown -h 10:53 #到10:53关机,如果该时间小于当前时间 ...
- .Net Core 中的选项Options
.NetCore的配置选项建议结合在一起学习,不了解.NetCore 配置Configuration的同学可以看下我的上一篇文章 [.Net Core配置Configuration源码研究] 由代码开 ...
- Java程序中使用Spire Jar包报java.lang.NoSuchMethodError类型错误的解决方法
Jar包功能概述 使用Spire系列的Jar包可以操作Word.Excel.PPT.PDF.Barcode等格式的文件,分别对应使用的jar包是Spire.Doc for Java.Spire.XLS ...
- 并发编程之:JUC并发控制工具
大家好,我是小黑,一个在互联网苟且偷生的农民工. 在上一期我们讲了Thread.join()方法和CountDownLatch,这两者都可以做到等待一个线程执行完毕之后当前线程继续执行,并且Count ...
- Django中使用MySQL数据库的连接配置
1. 安装pymysql pip install pymysql 2. 导入 # 在与 settings.py 同级目录下的 __init__.py 中引入模块和进行配置 import pymysql ...