WeChat applet development picture drag and drop

This article mainly introduces relevant information on detailed examples of image dragging and dropping in WeChat mini program development. Friends in need can refer to

Detailed explanation of image dragging and dropping examples in WeChat mini program development

1. Write the page structure: moveimg.wxml

<view class="container"> 
  <view class="cnt"> 
    <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bindtouchmove="ballMoveEvent"> 
    </image> 
  </view> 
</view>

2. Write page style: moveimg.wxss

.container { 
  box-sizing:border-box; 
  padding:1rem; 
} 
.cnt{ 
  width:100%; 
  height:15rem; 
  border: 1px solid #ccc; 
  position:relative; 
  overflow: hidden; 
} 
.image-style{  
  position: absolute;  
  top: 0px;  
  left:0px;  
  height:100%;  
}

3. Set data: moveimg.js

var app = getApp() 
Page({ 
  data: { 
    ballleft:-20, 
    screenWidth: 0, 
  }, 
  onLoad: function() { 
    var _this = this; 
    wx.getSystemInfo({ 
      success: function(res) { 
        _this.setData({ 
          screenHeight: res.windowHeight, 
          screenWidth: res.windowWidth, 
        }); 
      } 
    }); 
 
  }, 
  ballMoveEvent: function(e) { 
    var touchs = e.touches[0]; 
    var pageX = touchs.pageX; 
    console.log('宽度 '+this.data.screenWidth) 
    console.log('pageX: ' + pageX); 
    //这里用right和bottom.所以需要将pageX pageY转换  
    var x = this.data.screenWidth/2 - pageX-20; 
    if(this.data.screenWidth>385){ 
      if(x>42){x=42;} 
    }else{ 
      if(x>32){x=32;} 
    } 
    if(x<0){x=0;} 
    console.log(&#39;x:&#39; + x) 
    this.setData({ 
      ballleft: -x 
    }); 
  } 
})

I have been studying image cropping these days. I have ideas, but I have encountered various problems. Unfortunately, programming is not easy.

After thinking about it for a long time, I decided to start simply. If you have a better way or other ideas, please feel free to put them forward and discuss them together.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Methods for absolute positioning of images (background images) in WeChat mini-programs

WeChat mini-program passed The function of saving pictures and sharing them in Moments is implemented

nodejs development WeChat applet to implement password encryption

The above is the detailed content of WeChat applet development picture drag and drop. For more information, please follow other related articles on the PHP Chinese website!