在網(wǎng)頁設(shè)計中，控件拖拽的上下排序應(yīng)用非常廣泛。最近，在網(wǎng)上看到了一個類似的案例，通過中繼器來實現(xiàn)拖拽排序，但是這種方法只能往上拖拽排序，無法往下排序。經(jīng)過一番思考，我發(fā)現(xiàn)了一個不錯的方式可以分享給大家

在網(wǎng)頁設(shè)計中，控件拖拽的上下排序應(yīng)用非常廣泛。最近，在網(wǎng)上看到了一個類似的案例，通過中繼器來實現(xiàn)拖拽排序，但是這種方法只能往上拖拽排序，無法往下排序。經(jīng)過一番思考，我發(fā)現(xiàn)了一個不錯的方式可以分享給大家，希望能起到拋磚引玉的作用。

實現(xiàn)效果

先來看一下實現(xiàn)效果：

1. 看似復(fù)雜的效果，實際上實現(xiàn)起來非常簡單。

2. 主要應(yīng)用方式是通過鼠標(biāo)拖拽控件移動，并判斷控件所在位置。

Axure制作：鼠標(biāo)拖拽控件移動-動態(tài)面板方式

下面是具體的步驟：

1. 新建一個矩形并命名為“background”，設(shè)置尺寸為450*450（大小可以隨意），隱藏并鎖定位置（105, 20）。

2. 再創(chuàng)建一個矩形，將其內(nèi)容設(shè)置為“組件1”，填充色為#CCCCCC，尺寸為240*75，并將其轉(zhuǎn)為動態(tài)面板，命名為“Module1”，設(shè)置尺寸為240*80。

3. 復(fù)制三份“Module1”并分別命名為“Module2”、“Module3”和“Module4”，修改其內(nèi)容為“組件2”、“組件3”和“組件4”，并設(shè)置填充色。

4. 將“Module1”、“Module2”、“Module3”和“Module4”垂直排列，組件之間無間隙（間隙預(yù)留在動態(tài)面板state1中）。

交互設(shè)置

接下來是交互的設(shè)置步驟，其中只介紹了“Module1”的交互設(shè)置，其他組件的設(shè)置與之相同。

1. 在“Module1”的拖動開始時添加一個Case1用例：

- 隱藏“Module1”

- 拉動元件：下方

- 動畫：線性

- 時間：100毫秒

- 顯示“Module1”并置于頂層

2. 在“Module1”的拖動時添加一個Case1用例：

- 垂直拖動“Module1”

- 移動：垂直拖動

- 設(shè)置界限

3. 將“元件：background”設(shè)置為局部變量LVAR1，界限的頂部大于等于[[]]，底部小于[[]]。

4. 在“Module1”的拖動結(jié)束時的交互設(shè)置比較復(fù)雜，主要是判斷組件的位置。這里只設(shè)置了4個組件的移動，臨界點分別為（200, 140），（200, 220），（200, 300）。

- Case1判定條件：值：[[This.y this.height/2]]小于等于140

- 動作：

- 移動當(dāng)前組件到（200, 100）

- 隱藏當(dāng)前組件

- 顯示當(dāng)前組件并推動元件：下方

- Case2判定條件：值：[[This.y this.height/2]]小于等于220且值：[[This.y this.height/2]]大于140

- 動作：

- 移動當(dāng)前組件到（200, 180）

- 隱藏當(dāng)前組件

- 顯示當(dāng)前組件并推動元件：下方

- Case3判定條件：值：[[This.y this.height/2]]小于等于300且值：[[This.y this.height/2]]大于220

- 動作：

- 移動當(dāng)前組件到（200, 260）

- 隱藏當(dāng)前組件

- 顯示當(dāng)前組件并推動元件：下方

- Case4判定條件：值：[[This.y this.height/2]]大于300

- 動作：

- 移動當(dāng)前組件到（200, 340）

- 隱藏當(dāng)前組件

- 顯示當(dāng)前組件并推動元件：下方

優(yōu)化處理

以上僅是快速實現(xiàn)效果的原始案例，針對臨界點，可以進(jìn)行進(jìn)一步的優(yōu)化處理。希望本篇文章能對你有所幫助，如果覺得不錯，請投個票并加個贊哦！