Small program to achieve draggable floating buttons

The small program suspends the movable customer service button for your reference. The specific contents are as follows

<movable-area class="movable-area">
// According to x,y Set the position of the first display 
 <movable-view x="600rpx" y="750rpx" animation="{{false}}" class="movable-view" direction='all' catchtap="bindtapdianhua">
 <image class="xf_image" src="../../../images/icon/phone.png"></image>
 <text class="xf-text"> Customer service telephone </text>
 </movable-view>
</movable-area>

CSS:

.movable-area{
 pointer-events:none;
 /*  This property is set to none, Let all events penetrate the past  */
 z-index: 100;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
}
.movable-view{ 
 pointer-events:auto;
 /*  Reset to auto, Override parent property settings  */
 height: 100rpx;
 width: 120rpx;
 /* background: red; */
}
.xf-text {
 font-size:12px;
 color:#255DEA;
 margin-top: 10rpx;
}
.xf_button{
 background-color: rgba(255, 255, 255, 0);
 border: 0px;
 height: 100rpx;
 top: 70%;
 right: 0;
 bottom: 20rpx;
 position: fixed;
 display: flex;
 flex-direction: column;
}
.xf_button::after{
 border: 0px;
}
.xf_image{
 z-index: 5;
 width: 100rpx;
 height: 100rpx;
}

// pages/components/ss-phone-button.js
const app = getApp()
Page({
 /**
 *  Initial data of the page 
 */
 data: {
 },

 /**
 *  Life cycle function -- Listen for page loading 
 */
 onLoad: function (options) {

 },

 /**
 *  Life cycle function -- Listen to the initial rendering of the page 
 */
 onReady: function () {

 },

 /**
 *  Life cycle function -- Monitor page display 
 */
 onShow: function () {

 },

 /**
 *  Life cycle function -- Monitor page hiding 
 */
 onHide: function () {

 },

 /**
 *  Life cycle function -- Monitor page uninstall 
 */
 onUnload: function () {

 },

 /**
 *  Page-related event handlers -- Listen for user drop-down actions 
 */
 onPullDownRefresh: function () {

 },

 /**
 *  Handler of pull-bottom event on page 
 */
 onReachBottom: function () {

 },

 /**
 *  Users click on the upper right corner to share 
 */
 onShareAppMessage: function () {

 },
 //  Customer service number, click to dial 
 bindtapdianhua: function (e) {
 wx.makePhoneCall({
  phoneNumber: ' Mobile phone number ',
 })
 },
})