原生Js实现拖拽（适用于pc和移动端）
效果：
HTML和CSS部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽demo</title>
<style>
#mydiv{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
cursor: pointer;
background-color: #de98f0;
}
</style>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
Js部分
<script>
var block = document.getElementById("mydiv");
var oW, oH;
block.addEventListener("touchstart", function(e) {
var touches = e.touches[0];
oW = touches.clientX - block.offsetLeft;
oH = touches.clientY - block.offsetTop;
document.addEventListener("touchmove", defaultEvent, false);
}, false) block.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var oLeft = touches.clientX - oW;
var oTop = touches.clientY - oH;
if (oLeft < 0) {
oLeft = 0;
} else if (oLeft > document.documentElement.clientWidth - block.offsetWidth) {
oLeft = (document.documentElement.clientWidth - block.offsetWidth);
}
if (oTop < 0) {
oTop = 0;
} else if (oTop > document.documentElement.clientHeight - block.offsetHeight) {
oTop = (document.documentElement.clientHeight - block.offsetHeight);
}
block.style.left = oLeft + "px";
block.style.top = oTop + "px";
}, false); block.addEventListener("touchend", function() {
document.removeEventListener("touchmove", defaultEvent, false);
}, false); function defaultEvent(e) {
e.preventDefault();
}
</script>
原生Js实现拖拽（适用于pc和移动端）的更多相关文章
- 原生js实现拖拽效果
面向对象 + 原生js拖拽 拖拽div等盒子模型,都是日常操作没有什么问题,如果是拖拽图片的话,会有一点小坑要踩...... 那么我们看代码: var Move_fn = {}; (function( ...
- 原生js实现拖拽功能
1. 给个div,给定一些样式 <div class="drag" style="left:0;top:0;width:100px;height:100px&quo ...
- 手把手教你做一个原生js拖动滑块【兼容PC和移动端】
废话少说: 在PC端可以用mousedown来触发一个滑块滑动的效果,但在手机上,貌似无法识别这个事件,但手机上有touchstart事件,可以通过一系列"touch"事件来替代P ...
- js之拖拽事件
js之拖拽事件 api:https://www.runoob.com/jsref/event-ondrag.html 拖拽事件是js原生的事件,使用时在div上添加 draggable="t ...
- Js元素拖拽功能实现
Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...
- JS—实现拖拽
JS中的拖拽示例: 1)实现拖拽思路:当鼠标按下和拖拽过程中,鼠标与拖拽物体之间的相对距离保持不变 2)实现拖拽遇到的问题: 问题1:当鼠标按下移动过快时,离开了拖拽的物体时 ...
- js鼠标拖拽
html <div id="box"> </div> css ;;} #box{width:200px;height:200px;background:cy ...
- 原生API实现拖拽上传文件实践
功能: 拖拽上传文件.图片,上传的进度条,能够同时上传多个文件. 完整的demo地址:https://github.com/qcer/FE-Components/tree/master/QDrag 涉 ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 使用sklearn进行数据挖掘-房价预测(4)—数据预处理
在使用机器算法之前,我们先把数据做下预处理,先把特征和标签拆分出来 housing = strat_train_set.drop("median_house_value",axis ...
- CentOS6.9中挂载NTFS移动硬盘
公司需要本地备份,不占用公网带宽,而本地服务器硬盘容量不够,所以需要将本地服务器centos 6.9系统的备份数据拷贝到移动硬盘. 所以需要在centos上挂载NTFS格式的移动硬盘. 方法/步骤: ...
- CSS选择器汇总
id选择器 #id 类选择器 .class 标签选择器 div, h1, p 相邻选择器 h1 + p 子选择器 ul > li 后代选择器 li a 通配符选择器 * 属性选择器 a[rel= ...
- Angular通信$q服务和promise对象
promise 约定(promise)是一个对象,表示在未来时间点会发生的某件事情,约定可以是三种状态之一:等待.完成或拒绝.约定将从等待状态开始,然后可以转换为完成或者拒绝状态,一旦约定完成或者被拒 ...
- Winsock网络编程笔记（1）----入门
今天第一次接触winsock网络编程,看的资料是Windows网络编程第二版.通过博客记住自己的看书笔记.. 在这里贴出第一个程序,虽然程序什么都没做,但以此作为入门,熟悉其网络编程风格.. #inc ...
- Python-week1，第一周（基于Python3.0以上）
1,变量 准确来说不是第一周学习了吧,应该是采用博客记录学习的第一周,记录并做个笔记吧,可能做的不好,但我高兴啊,废话不说了,上图. 学习过程中做的一些笔记,当然能面面俱到,只能在写博客的时候又能复习 ...
- Flex 基础语法（二）
1.flex -direction 属性 含义 row(默认值) 主轴为水平方向,起点在左端. row-reverse 主轴为水平方向,起点在右边. column 主轴为垂直方向,起点在上沿. col ...
- defaultView and parentWindow
defaultView 只读的 which is used to represent the currently rendered view of the document 返回的值通常是包含 ...
- Node.js CVE-2017-1484复现（详细步骤）
0x00 前言 早上看Sec-news安全文摘的时候,发现腾讯安全应急响应中心发表了一篇文章,Node.js CVE-2017-14849 漏洞分析(https://security.tencent. ...
- CSS3中的属性介绍
概念:给文字添加阴影 语法:text-shadow: length length length color 介绍:前两个参数为阴影离开文字的横方向位移距离与纵方向位移距离.使用时前两个参数必须指定,也 ...