微信小程序的拖拽组件（滑动组件）movable-area

需求，实现下图功能：

GIF4.gif

代码：

官方文档：http://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

最终效果：

GIF5.gif

补充源码：

 
  
    
      京东秒杀
      18点场
    
    
      
      
        
          
          {{item.pNew}}
          {{item.pOld}}
        
      
      
    
  
  

.u-wrp-secKill {
  display: block;
  position: relative;
  margin-top: 10rpx;
  width: 100vw;
  height: 280rpx;
  background: #fff;
}

.u-wrp-secKillHead {
  display: block;
  position: relative;
  width: inherit;
  height: 60rpx;
  border-bottom: 1px solid #f0f0f0;
}

.u-txt-skTitle {
  line-height: 60rpx;
  font-size: 28rpx;
  color: #f00;
  padding: 0 20rpx;
  display: inline-block;
  position: relative;
  font-weight: bold;
}

.u-txt-sktime {
  line-height: 60rpx;
  font-size: 24rpx;
  color: #333;
  padding: 0 20rpx;
  display: inline-block;
  position: relative;
  font-weight: bold;
}

.u-img-skimgs {
  width: 160rpx;
  height: 220rpx;
  display: inline-block;
  background-color: #fff;
  float: left;
  text-align: center;
}

.u-img-skimgItem {
  width:140rpx;height:140rpx;
}

.u-txt-sktxtItem1 {
  display:block;color:#f00;font-size:24rpx;
}

.u-txt-sktxtItem2 {
  display:block;color:#999;font-size:24rpx;text-decoration:line-through;
}

Page({
  data: {
    "skItems": [{
      "pic": "img/seckill/01.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/02.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/03.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/04.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/05.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/06.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/07.jpg",
      "pOld": "999",
      "pNew": "666"
    }, {
      "pic": "img/seckill/08.jpg",
      "pOld": "999",
      "pNew": "666"
    }]
  }
})