大家好，我是大马猴，又见面了，今天给大家带来一个列表拖动换位的教程。

话不多说，先看效果：

教程开始：
一、首先准备元件
1、列表一个，用于当做表头（用矩形拼也可以）。
2、中继器一个，用于当列表的内容（内容放几列随意，我用的是5列+1操作列）
3、拖动图标一个，然后给转换成动态面板，放置中继器里备用。
4、拖拽个矩形（复制5个），大小跟中继器的格子一样大，然后组合起来（每个格子都起好名字，查找方便）并且隐藏，用于拖拽时候获取列表内容跟随拖动图标移动。

5、如图：

二、教程开始
1、首先双击进入中继器里面，把第一个矩形大小设定好，然后复制出5个，每个矩形起好名字，方便找到，然后中继器属性也都起好名字并且填上内容，设置事件每项加载时获取对应文本。然后给这几个矩形组合起来备用。

注意：id属性要填好，用于更换位置后更新排序。

如图：

2、然后把拖动图标转换为动态面板，剪切到中继器里，放置最后一格中间位置。

如图：

3、我们对拖动图标动态面板进行拖动事件设定，当拖动时，设置动态面板垂直移动。

如图：

4、设置动态面板事件，拖动开始时，设置移动事先准备好的组合到绝对位置，x=中继器的x坐标，y=中继器+item.id*35的坐标（35是中继器里格子的高度，如果你设定的格子是40，那你就item.id*40）

如图：

5、还是拖动开始时，设定外面组合的每个格子对应获取中继器的数据，然后标记全部中继器（用于之后更新行），然后显示组合，然后设置中继器里的这些格子不透明30%（用于拖拽时候能看出效果）

如图：

6、当拖动图标动态面板移动时，设置外面的组合跟随。
如图：

PS：到这里大家可以F5运行拖拽一下，效果是有了，但是越拖越乱，因为拖拽后没有更新行的缘故。所以继续往下来。
7、对面板继续设定事件，当拖动结束时，设置更新中继器id这一行，=(中继器里的组合.y-中继器.y)/行高度。

如图：

8、当拖动结束时，添加排序，给id进行升序。

如图：

9、当拖动结束时，我们设定一个触发单击事件，然后继续添加事件，当鼠标点击时，设置更新id已标记行，=目标id-1。别移动外面的组合到中继器的x坐标，中继器的y+id*35的y坐标。

如图：

10、最后一步，当拖动结束时，等待100毫秒隐藏外面的组合。

如图：

三、到这里教程就全部结束了，大家有更好的实现方式可以留言交流，感谢你们。