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


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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
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
php4的session功能评述(一)
2006/10/09 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
jquery ready()的几种实现方法小结
2010/06/18 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
javascript:json数据的页面绑定示例代码
2014/01/26 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
高中生自我评语大全
2014/01/19 职场文书
食品厂厂长岗位职责
2014/01/30 职场文书
中学生打架检讨书
2014/02/10 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2015年服务员工作总结
2015/04/08 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL
react中的DOM操作实现
2021/06/30 Javascript