还记得昨天自己还在怀疑自己能不能坚持写教你的微信小程序系列，没想到今天原本打算不写的，却有些不舒服了。人们除了坚持每天吃饭睡觉，还有其他事情是可以坚持十年如一日的呢？扯得有点远了。今天我们要介绍的是微信小程序中的图片的拖动效果。我们在app的开发过程中也经常会遇到一些拖动图片的需求，那么在小程序中如何如实现呢？
首先我们先来看看动态效果图：
首页代码如下（我知道这个不重要啦。。~~）
<view class="copyright">
<view class="copyright_item">CopyRight：All Right Reserved</view>
<view class="copyright_item">原创作者：51小程序</view>
<view class="copyright_item">微信
小程序开发
者社区</view>
<view class="copyright_item"></view>
<view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
<view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入鼠标拖动演示页面</button></view>
</view>
真正关键的代码如下：
<view class="view"
style="left:{{left}}px;top:{{top}}px;"
bindtouchmove="viewTouchMove"
>使用鼠标拖动我</view>
Page({
data:{
left:'',
top:''
},
viewTouchMove:function(e){
this.setData({
left:e.touches[0].clientX-60,
top:e.touches[0].clientY-60
})
}
}).view{
position: absolute;
height:120px;
width:120px;
background:green;
color: white;
text-align: center;
line-height: 120px;
}
感兴趣的同学可以下载源码：
欢迎大家转发，让更多的人知道我们的网站，谢谢。
moveing.rar爱盈利（aiyingli.com）移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。
【转载说明】 若上述素材出现侵权，请及时联系我们删除及进行处理：8088013@qq.com
