原生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 ...
随机推荐
- vuex的简易入门
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
- Java基础笔记13
1.集合与对象数组的区别 集合与对象数组共同点:都是存放对象的容器: 区别在于:①集合是没有长度限制的:②集合容器中没有类型的限制. 2.集合(都在Java.util包下) 常用的集合:Collect ...
- CSS3新特性汇总
新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)} 弹性盒模型 display: flex; 多列布局 column-count: 5; 媒体查询 @ ...
- 2017CCPC秦皇岛G ZOJ 3987Numbers（大数+贪心）
Numbers Time Limit: 2 Seconds Memory Limit: 65536 KB DreamGrid has a nonnegative integer n . He ...
- ASP.NET Core的身份认证框架IdentityServer4（3）-术语的解释
IdentityServer4 术语 IdentityServer4的规范.文档和对象模型使用了一些你应该了解的术语. 身份认证服务器(IdentityServer) IdentityServer是一 ...
- 流式计算storm，spark文章
使用Storm实现实时大数据分析!http://www.csdn.net/article/2012-12-24/2813117-storm-realtime-big-data-analysis ...
- 通用的contain函数
用来检测节点所属关系:document.documentElement.contains(document.body) function contains(refNode, otherNode) {i ...
- MySQLbase
/*多行注释*/-- 单行注释-- 创建用户: CREATE USER '用户名'[@'主机名'] IDENTIFIED BY '密码'-- 主机名可以为空,省略主机名表示默认权限为%, 所有主机都可 ...
- 手工搭建基于ABP的框架(2) - 访问数据库
为了防止不提供原网址的转载,特在这里加上原文链接: http://www.cnblogs.com/skabyy/p/7517397.html 本篇我们实现数据库的访问.我们将实现两种数据库访问方法来访 ...
- Mybatis面试整理
#{}和${}的区别 #{}是预编译处理,${}是字符串替换. Mybatis在处理#{}时,会将sql中的#{}替换为?号,调用PreparedStatement的set方法来赋值: Mybatis ...