微信小程序 实现拖拽事件监听实例详解


Posted in Javascript onNovember 16, 2016

微信小程序 拖拽监听功能:

        在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下。

需要做个浮在scroll-view之上的button.尝试了一下.

上GIF:

微信小程序 实现拖拽事件监听实例详解

Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标.

1.index.wxml

../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">  
</image>

简单的设置一张图片,添加触摸事件监听.点击事件监听.根据触摸事件获取X Y位移,设置为image的位置

2.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  ballBottom: 240, 
  ballRight: 120, 
  screenHeight: 0, 
  screenWidth: 0, 
 }, 
 onLoad: function () { 
[javascript] view plain copy
<span style="white-space:pre"> </span>//获取屏幕宽高 
  var _this = this; 
  wx.getSystemInfo({ 
   success: function (res) { 
    _this.setData({ 
     screenHeight: res.windowHeight, 
     screenWidth: res.windowWidth, 
    }); 
   } 
  }); 
 }, 
 ballMoveEvent: function (e) { 
  console.log('我被拖动了....') 
  var touchs = e.touches[0]; 
  var pageX = touchs.pageX; 
  var pageY = touchs.pageY; 
  console.log('pageX: ' + pageX) 
  console.log('pageY: ' + pageY)
//防止坐标越界,view宽高的一般 
  if (pageX < 30) return; 
  if (pageX > this.data.screenWidth - 30) return; 
  if (this.data.screenHeight - pageY <= 30) return; 
  if (pageY <= 30) return;
//这里用right和bottom.所以需要将pageX pageY转换 
  var x = this.data.screenWidth - pageX - 30; 
  var y = this.data.screenHeight - pageY - 30; 
  console.log('x: ' + x) 
  console.log('y: ' + y) 
  this.setData({ 
   ballBottom: y, 
   ballRight: x 
  }); 
 },
//点击事件 
 ballClickEvent: function () { 
  console.log('点击了....') 
 } 
})

3.index.wxss

这里需要设置z-index

.image-style{ 
 position: absolute; 
 bottom: 240px; 
 right: 100px; 
 width: 60px; 
 height: 60px; 
 z-index: 100; 
}

Javascript 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
JavaScript仿微博发布信息案例
Nov 16 #Javascript
使用Node.js给图片加水印的方法
Nov 15 #Javascript
Node.js批量给图片加水印的方法
Nov 15 #Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 #Javascript
AngularJS extend用法详解及实例代码
Nov 15 #Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP学习之PHP表达式
2006/10/09 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
Python Queue模块详解
2014/11/30 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python处理document文档保留原样式
2019/09/23 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
人力资源管理专业自荐书范文
2014/02/10 职场文书
工艺员岗位职责
2014/02/11 职场文书
西式结婚主持词
2014/03/14 职场文书
年会主持词结束语
2014/03/27 职场文书
创先争优公开承诺书
2014/08/30 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
MySQL优化及索引解析
2022/03/17 MySQL
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技