Heim > WeChat-Applet > Mini-Programmentwicklung > Das WeChat-Applet implementiert Beispiele für die Drag-and-Drop-Ereignisüberwachung im Detail

Das WeChat-Applet implementiert Beispiele für die Drag-and-Drop-Ereignisüberwachung im Detail

高洛峰
Freigeben: 2017-02-13 10:50:16
Original
2397 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zur Implementierung von Drag-and-Drop-Ereignisüberwachungsbeispielen im WeChat-Applet vorgestellt. Diese Methode wird bei der Entwicklung vieler Anwendungen oder Software verwendet . Freunde in Not können sich auf die Drag-and-Drop-Überwachungsfunktion des WeChat-Applets beziehen:

Bei der Entwicklung von Software oder APP-Anwendungen stoßen Sie in letzter Zeit häufig auf Drag-and-Drop-Überwachung Ich habe etwas über WeChat-Miniprogramme gelernt und möchte einen solchen Drag-and-Drop-Effekt erzielen, den ich hier aufzeichnen werde.

Ich muss eine Schaltfläche erstellen, die in der Scroll-Ansicht schwebt

GIF:

微信小程序 实现拖拽事件监听实例详解Android verfügt auch über ähnliche Vorgänge wie das Verschieben von Steuerelementen. Die Idee ist, die X-Y-Variablen der Verschiebung abzurufen und die Koordinaten für das Steuerelement festzulegen


Einfach ein Bild einrichten, einen Touch-Event-Listener hinzufügen und die X-Y-Verschiebung entsprechend dem Touch-Event festlegen an die Position des Bildes

2.index.js
../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent">  
</image>
Nach dem Login kopieren


//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  ballBottom: 240, 
  ballRight: 120, 
  screenHeight: 0, 
  screenWidth: 0, 
 }, 
 onLoad: function () { 
[javascript] view plain copy
<span style="white-space:pre"> </span>//获取屏幕宽高 
  var _this = this; 
  wx.getSystemInfo({ 
   success: function (res) { 
    _this.setData({ 
     screenHeight: res.windowHeight, 
     screenWidth: res.windowWidth, 
    }); 
   } 
  }); 
 }, 
 ballMoveEvent: function (e) { 
  console.log(&#39;我被拖动了....&#39;) 
  var touchs = e.touches[0]; 
  var pageX = touchs.pageX; 
  var pageY = touchs.pageY; 
  console.log(&#39;pageX: &#39; + pageX) 
  console.log(&#39;pageY: &#39; + pageY)
Nach dem Login kopieren

//防止坐标越界,view宽高的一般 
  if (pageX < 30) return; 
  if (pageX > this.data.screenWidth - 30) return; 
  if (this.data.screenHeight - pageY <= 30) return; 
  if (pageY <= 30) return;
Nach dem Login kopieren

//这里用right和bottom.所以需要将pageX pageY转换 
  var x = this.data.screenWidth - pageX - 30; 
  var y = this.data.screenHeight - pageY - 30; 
  console.log(&#39;x: &#39; + x) 
  console.log(&#39;y: &#39; + y) 
  this.setData({ 
   ballBottom: y, 
   ballRight: x 
  }); 
 },
Nach dem Login kopieren

3.index.wxss

//点击事件 
 ballClickEvent: function () { 
  console.log(&#39;点击了....&#39;) 
 } 
})
Nach dem Login kopieren
Hier müssen Sie den Z-Index festlegen


Detailliertere Beispiele für die WeChat-Applet-Implementierung von Drag und Drop-Event-Überwachung, bitte beachten Sie die PHP-Chinese-Website für verwandte Artikel!

.image-style{ 
 position: absolute; 
 bottom: 240px; 
 right: 100px; 
 width: 60px; 
 height: 60px; 
 z-index: 100; 
}
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage