小程序实现元素在页面可拖动 movable-area

先看实现效果图：

   实现客服按钮在页面区域可拖动；

 

1:首先要定义一个容器,使元素在这个容器范围内可来回拖动；

//<movable-area> 就是该容器
//<movable-view> 是拖动的元素
// x y 是定义元素在页面的具体位置
//animation 防止拖动的时候掉帧

<movable-area>
  <movable-view direction="all" animation="{{false}}" x="340" y="460"> 
       <image src='../../image/19.png' class='ks_chat' mode='widthFix'></image>
  </movable-view>
</movable-area>

css 部分

movable-area {
  height: 100%;
  width: 100%;  
}

movable-view { 
  width: fit-content;
  height: fit-content; 
  position: fixed; 
  z-index: 9999; 
}