微信小程序之原生鼠标拖动图片效果

先看看效果：

思路就是：监听鼠标移动的位置，用position:absolute的属性，实时改变left,top这两个值。
看看源码：
wxml

  <view class='draw-content'>
    <image src='/images/look2.png' class="look-image"></image>
    <view class='litlelooks-wrap' bindtouchmove="imagetouchmove" style='left:{{leftLooks}}px;top:{{topLooks}}px;>
      <image class='close' src="/images/close.png" bindtap='hideLooks'></image>
      <image class='litlelooks-image' src='/images/litlelook1.png'></image>
    </view>
  </view>

js

data: {
    leftLooks: '20',
    topLooks: '20',
  },
imagetouchmove:function(e){
    var self = this;
    self.setData({
      leftLooks: e.touches[0].clientX - 60,
      topLooks: e.touches[0].clientY - 60
    })
  },

wxss

.draw-content{
  width: 750rpx;
  height: 750rpx;
  margin-top: 34rpx;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc
}
.look-image{
  width: 750rpx;
  height: 750rpx;
}
.litlelooks-wrap{
  position: absolute;
  width: 120rpx;
  height: 120rpx;
}
.close{
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  width: 38rpx;
  height:38rpx;
}
.litlelooks-image{
  width: 120rpx;
  height:120rpx;
}

功能实现的，难度不大，基本的代码已经贴上了，就是少了3个图片，这个劳烦你自行操作了。