中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：排序是表格應(yīng)用中常用的工具，本文作者分享了表格拖動排序的相關(guān)方法，介紹了其原理、材料準備以及交互設(shè)置的具體流程，一起來學習一下吧。

排序是表格中常用的交互，一般常用的是升序和降序，如果要隨心所欲的設(shè)置自定義表格，按自己的偏好任意調(diào)整的，就是拖動排序了，一般在自定義表格中比較常見。所以今天作者就教大家，如何制作鼠標拖動表格中的某一行或者某一列并移動到表格中對應(yīng)的位置。

原型預(yù)覽地址：https://y3av3g.axshare.com/#g=1

那下面我們一起開始制作吧。

一、原理介紹

主要用到的交互其實就是中繼器的排序事件，根據(jù)中繼器表格里面的序號排列，拖動結(jié)束后，通過更新行的操作，更新列表中對應(yīng)行的序號，這樣就可以實現(xiàn)拖動排序的效果。

例如列表中的第一行、第二行、第三行的序號分別為1、2、3，如果拖動第一行到最下的位置，那么他們的序號就變成3、1、2，因為排序事件拖動后就會去到最下方。

當然了，這里還需要一些計算公式，例如計算距離，拖動多遠，去到哪里，以及序號的加減問題。我們會在下面講解交互的時候，詳細說明。

二、材料準備

主要材料是中繼器、動態(tài)面板、矩形元件。

1. 表格表頭設(shè)置

表頭其實就是用多個矩形拼在一起，需要幾列就幾個矩形。樣式根據(jù)自身需要設(shè)置即可，如下圖所示擺放：

2. 中繼器內(nèi)部元件

中繼器里主要的元件也是和多個多個矩形拼在一起，這里的寬度要和上面表頭一樣，一一對應(yīng)。如果需要移入高亮的效果，我們也可以增加一個背景矩形，設(shè)置移入時變色的交互樣式。如果要做斑馬線交互效果，也可以在中繼器樣式中設(shè)置背景顏色交替。

元件準備好之后，我們要把中繼器里所有元件選中，右鍵轉(zhuǎn)為動態(tài)面板，因為只有動態(tài)面板才可以才可以拖動。

3. 中繼器表格

中繼器表格里主要分兩種列，排序列和內(nèi)容列。

排序列就是no，默認1234567順序填寫即可，不用于顯示，只用于邏輯交互。

內(nèi)容列就是column1~6，對應(yīng)表格元件對應(yīng)的內(nèi)容。

4. 其他元件

這里主要是指文本標簽，只用于邏輯記錄，默認隱藏。

三、交互設(shè)置

1. 中繼器每項加載時

這里我們只需要把中繼器表格里column1~6的內(nèi)容，設(shè)置到中繼器里面對應(yīng)的矩形即可。這里用到設(shè)置文本的交互。

2. 中繼器載入時

載入時，我們設(shè)置中繼器排序，讓中繼器按照no列的升序排列，這樣后續(xù)移動更新了序號后，就能自動排序了。

3. 動態(tài)面板拖動結(jié)束時

這里就是鼠標松開的時候，即拖動結(jié)束了。

這里我們首先要計算移動的距離，簡單來說就是計算移動了多少格。這里我們主要用到TotalDragY函數(shù)，這個函數(shù)可以記錄拖動的垂直距離，我們用TotalDragY除以表格里面一行的高度（其實就是矩形的高度），然后四舍五入，就可以得到他移動了多少格。

接下來我們就要分情況討論了

1）當前序號（行數(shù)）+移動格子>中繼器可以看到的總行數(shù)。例如中繼器總共8行，你移動的是第三行，序號就是3了，移動了9格距離，加起來就是12,12大于8，相當于第三行移到了最后。那這時我們就要需改移動格數(shù)的記錄文本了，他實際上移動的格數(shù)是中繼器的中行數(shù)-他的序號，即8-3=5格，即他向下移動5格就到底了。

2）移動格子1-當前序號（行數(shù)）。例如當前移動的是第三行，，序號就是3了，向上移動了10格，就是-10，小于1-3=-2，簡單來說就是移動到最上面的一行了。所以我們也是要修改移動格數(shù)的記錄文本了，他實際上移動的格數(shù)1-當前序號（行數(shù)），即1-3=-2格。即他向上移動2格就到頂了。

這樣就把真實需要移動的格數(shù)修正了，接下來我們還需要根據(jù)他是向上移動還是向下移動分別寫交互。這里記錄移動格數(shù)如果是正，就是向下移動，如果是負數(shù)，就是向上移動。

我們先來討論向下移動的情形：

我們這里用更新行的交互，更新對應(yīng)行的序號。跟新的對象（條件）是，移動行的序號+移動格子數(shù)大于等于目標行，并且目標行大于等于當前行。

例如移動行是第三行，移動了兩格，移動行的序號+移動格子數(shù)大于等于目標行的結(jié)果為5，目標行大于等于當前行，即大于3。

大于3小于等于5的格子就是第四行和第五航，那需要改變的其實就是45兩格。我們更新他的序號，把它變成3和4就可以，即原來的序號-1。

除此之外，我們還要更新當前行，將他的序號更新為，當前的序號+移動的格子，即3+2=5，這樣向下移動就完成了。

然后再來討論向上移動的情形：

其實原理都是一樣的，首先更新目標行序號=移動行的序號，并且移動行序號+移動格數(shù)大于移動行序號。

例如移動的是第三行，向上移動了2格，那么更新的行其實就是第一行和第二行。他們的序號從原來的1、2更新成2、3接即可，即原來的序號+1。

除此之外，我們還要更新當前行，即移動的行，將他的序號更新為，當前的序號-移動的格子，即3-2=1，這樣向上移動也完成了。

4. 其他交互

其他交互，可以是美化的交互，例如想把移動效果顯示出來，那我們可以在中繼器外部增加一個動態(tài)面板，在中繼器里面動態(tài)面板移動時，即鼠標拖動某一行內(nèi)容時，我們用移動的交互，讓外面的動態(tài)面板跟隨鼠標移動即可。

這里因為我們是拖動行，所以移動時選擇跟隨鼠標垂直移動。

當然了，我們還需要根據(jù)不同的行用設(shè)置文本的交互將表格內(nèi)容傳遞出去，而且還需要在拖動開始時，用移動的交互將動態(tài)面板移動到對應(yīng)行的位置。

這些都是美化效果，不是必須的，所以在這里就不展開。

另外，如果你們是拖動列的話就選擇水平移動，如下圖所示的效果。

其實原理都是一樣的，只要把表格轉(zhuǎn)置一下，然后所有垂直的交互，改成水平就可以了。

做好以后，當我們再次使用時，只需要在中繼器的表格里填寫選項即可，自動生成交互效果，是不是很方便呢？

那以上就是本期的全部內(nèi)容了，感謝您的閱讀，我們下期見~

作者：做產(chǎn)品但不是經(jīng)理；微信公眾號：Axure高保真原型；

本文由 @做產(chǎn)品但不是經(jīng)理 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。