小程序实现拖拽功能原来这么简单？？

  我们公司是做商城项目的，试问当页面有一个悬浮窗的快捷功能时，本意是让用户操作更方便的，由于悬浮窗会挡住页面部分元素，导致你要点击某个目标时点击范围变小，操作体验不友好....用户心里可能在想：这个破东西挡住了，拖拽又拖不了，怎么搞的.... 不买了，生气（︶^︶）

所以，前端的交互是很重要的，因为这是用户最直观能感受到的东西，交互没做好，我认为是一定程度上影响到用户下单决定，影响业绩的。秉持着这个理念，我把悬浮窗改成了可拖拽的。以下是实现的方式：

1.小程序已经很贴心的提供了组件给我们，movable-view 需要搭配movable-area使用，具体的可以去看文档  👉点这里

2.先确定好拖拽的范围，我这边定的拖拽范围是下图绿色框住的位置，不能超过绿色范围，大家可以根据自己公司业务情况调整拖拽范围。

3.新建了一个悬浮窗的组件float-nav。那刚刚框出来的位置，实际就是手机屏幕的宽高，所以先获取手机屏幕的宽高。

// float-nav.js
Component({
  /**
   * 组件的初始数据
   */
  data: {
    screenWidth: 0, // 手机屏幕宽度
    screenHeight:0, //手机屏幕高度
  },
  lifetimes: {
    attached: function () {
      // 获取手机信息
      const systemInfo = wx.getSystemInfoSync();
      this.setData({
        screenWidth: systemInfo.screenWidth,
        screenHeight: systemInfo.screenHeight
      });
    },
  }
})

4.使用微信提供的组件， 视图区高度减掉了130的高度，是因为tabbar的高度，拖拽范围不能超过tabbar。我把悬浮窗位置定在了x轴330px,y轴400px的位置。

<!--float-nav.wxml-->
<movable-area style="width: {{screenWidth}}px;height: {{screenHeight - 130}}px">
  <movable-view x="{{330}}" y="{{400}}" direction="all" style="width: 96rpx;height: 96rpx;" class="float-nav">
    <view class="float-nav-icon">
    </view>
  </movable-view>
</movable-area>

/*float-nav.wxss*/
.float-nav {
  position: fixed;
  bottom: 0rpx;
  right: 0;
}
.float-nav-icon {
  width: 96rpx;
  height: 96rpx;
  background: url('/icon-cart.png') no-repeat;
  background-size: cover;
} 

【效果展示】

~~ END ~~