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

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

實(shí)現(xiàn)效果

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

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

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

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

下面是具體的步驟：

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

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

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

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

交互設(shè)置

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

1. 在“Module1”的拖動(dòng)開始時(shí)添加一個(gè)Case1用例：

- 隱藏“Module1”

- 拉動(dòng)元件：下方

- 動(dòng)畫：線性

- 時(shí)間：100毫秒

- 顯示“Module1”并置于頂層

2. 在“Module1”的拖動(dòng)時(shí)添加一個(gè)Case1用例：

- 垂直拖動(dòng)“Module1”

- 移動(dòng)：垂直拖動(dòng)

- 設(shè)置界限

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

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

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

- 動(dòng)作：

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

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

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

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

- 動(dòng)作：

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

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

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

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

- 動(dòng)作：

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

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

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

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

- 動(dòng)作：

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

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

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

優(yōu)化處理

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