WeChat applet development image drag and drop instance details, program development drag and drop

Detailed description of drag-and-drop instances for applet development, and drag-and-drop for Program Development

Detailed description of drag-and-drop instances for applet Development

1. Compile 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. Compile the 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. optional wheight, screenWidth: res. required wwidth,}) ;}}) ;}, ballMoveEvent: function (e) {var touchs = e. touches [0]; var pageX = touchs. pageX; console. log ('width' + this. data. screenWidth) console. log ('pagex: '+ pageX); // use right and bottom here. therefore, you need to convert pageX pageY to 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 ('x: '+ x) this. setData ({ballleft:-x });}})

I have been studying image cropping over the past few days, but I have encountered various problems. Poor programming is not easy.

After thinking for a long time, let's make a simple start. If you have a better way or other ideas, you are welcome to discuss them together.

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!