当前位置: 首页 > news >正文

元素拖放

 1             // 获取节点
 2             var block = document.getElementById("right");
 3             var oW, oH;
 4             // 绑定touchstart事件
 5             block.addEventListener("touchstart", function (e) {
 6                 var touches = e.touches[0];
 7                 oW = touches.clientX - block.offsetLeft;
 8                 oH = touches.clientY - block.offsetTop;
 9                 //阻止页面的滑动默认事件
10                 document.addEventListener("touchmove", defaultEvent(event), false);
11             }, false);
12             block.addEventListener("touchmove", function (e) {
13                 var touches = e.touches[0];
14                 var oLeft = touches.clientX - oW;
15                 var oTop = touches.clientY - oH;
16                 if (oLeft < 0) {
17                     oLeft = 0;
18                 } else if (oLeft > document.documentElement.clientWidth - block.offsetWidth) {
19                     oLeft = (document.documentElement.clientWidth - block.offsetWidth);
20                 }
21                 block.style.left = oLeft + "px";
22                 block.style.top = oTop + "px";
23             }, false);
24             block.addEventListener("touchend", function () {
25                 document.removeEventListener("touchmove", defaultEvent(event), false);
26             }, false);
27             function defaultEvent(event) {
28                 event.preventDefault();
29             };

 

转载于:https://www.cnblogs.com/NB-JDzhou/p/8664105.html

相关文章:

  • 一、python与pycharm的安装
  • BZOJ4071 洛谷3644 UOJ112:[APIO2015]巴邻旁之桥——题解
  • xtrabackup 在线主从搭建
  • css3实现渐变
  • 泼出去的“邮件”U-Mail邮件系统替你收回
  • 1036. [ZJOI2008]树的统计【树链剖分】
  • Koa2 之文件上传下载
  • BZOJ1010:[HNOI2008]玩具装箱TOY(斜率优化DP)
  • 黑客基础之 DOS命令3
  • postgreSQL中如何实现group_concat
  • Linux系统获取命令帮助方法及简单命令介绍
  • ★ prototype、__proto__ 详解
  • 大数据生态圈的一致性
  • Java 8 并发篇 - 冷静分析 Synchronized(上)
  • 运维面试题
  • Bootstrap JS插件Alert源码分析
  • CSS相对定位
  • Debian下无root权限使用Python访问Oracle
  • JavaScript对象详解
  • Redis学习笔记 - pipline(流水线、管道)
  • SegmentFault 2015 Top Rank
  • Vue2 SSR 的优化之旅
  • webgl (原生)基础入门指南【一】
  • windows下mongoDB的环境配置
  • 关于extract.autodesk.io的一些说明
  • 跨域
  • 猫头鹰的深夜翻译:Java 2D Graphics, 简单的仿射变换
  • 区块链分支循环
  • 让你的分享飞起来——极光推出社会化分享组件
  • 思考 CSS 架构
  • 微信支付JSAPI,实测!终极方案
  • 移动端 h5开发相关内容总结(三)
  • 用Python写一份独特的元宵节祝福
  • 在 Chrome DevTools 中调试 JavaScript 入门
  • 自定义函数
  • 容器镜像
  • 如何正确理解,内页权重高于首页?
  • ​【C语言】长篇详解,字符系列篇3-----strstr,strtok,strerror字符串函数的使用【图文详解​】
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • (C++17) std算法之执行策略 execution
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (NSDate) 时间 (time )比较
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .Net Memory Profiler的使用举例
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .NET 的程序集加载上下文
  • .NET 反射的使用
  • .net操作Excel出错解决
  • .NET程序员迈向卓越的必由之路
  • /使用匿名内部类来复写Handler当中的handlerMessage()方法
  • :“Failed to access IIS metabase”解决方法
  • @property python知乎_Python3基础之:property
  • @SuppressWarnings(unchecked)代码的作用