小程序拖动排序

最新推荐文章于 2024-06-04 16:16:05 发布

原创

最新推荐文章于 2024-06-04 16:16:05 发布 · 2.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#小程序拖动排序

本文分享了如何使用小程序的movable-area组件实现拖动排序功能。作者经过一周的努力，成功实现了这一逻辑，并提供了基础代码供测试，进一步的样式完善需要自行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做了一个小程序的 movable-area 组件做的一个拖动功能，可能是我比较笨，逻辑我想了一个星期才有点起色，终于是弄好了，

废话少说，上代码。

<view class="section">
  
  <movable-area class="area" >
    <movable-view class='cent' wx:for="{
  
  {list}}"  x="{
  
  {item.x}}" y="{
  
  {item.y}}"  
    data-index="{
  
  {index}}" bindtouchstart='start' bindtouchend='end'  bindtouchmove='move' direction="vertical">
    {
  
  {item.id}}</movable-view>
  </movable-area>

  
</view>

.section{
  width: 100%;
  height: 100vh;
}
.area{
height: 100vh;
width: 100%;
background-color: white;
}
.cent{
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  border: solid 1rpx #7c7c7c;
  height: 100rpx;
  width: 99.5%;
}