用movable-view实现可拖拽的列表元素
wxml:
<movable-view class="outer">
<movable-item class="inner" wx:for="sequence"
bind:change="onChange" bind:touchstart="touchstart" bind:touchend="touchend">
....
</movable-area>
......
</movable-view>
wxss:
.outer{
width:100%;
height:100%;
padding: 0 8px;
}
.inner{
display:inline-block;
position:relative;
width:unset;
height:unset;
margin:2px 1px 2px 2px;
}
效果类似于:
这样可以使元素不堆叠。 再设置movable-view的bind:change, bind:touchstart, bind:touchend方法监听移动即可。有时移动后不刷新内容显示,可以修改sequence的长度进行强制刷新。
不过movable-view的上下padding在内容有margin的时候貌似计算不准确,比如如果把外层的padding改成8px,则出现以下情况:
最后一行出线了错位情况。。不知道是什么原因。