菜单栏拖拽效果

波斯大香蕉

liangyongfei 发表于 2015-12-18 10:56
好的！写完了，记得分享下您的经验！大家相互学习下，谢谢

- - 拖拽是搞完了，现在存排序，思绪有点乱了，求屡屡。
就是现在菜单栏的这些按钮是从后台拿过来的，然后用Sortable也可以拖拽排序了，排序之后又要怎么获取当前的序列保存当前的序列到cookie里，下次再开APP的时候还是这个排序= = ，现在不知道获取排序。

liangyongfei

波斯大香蕉 发表于 2015-12-18 14:35
- - 拖拽是搞完了，现在存排序，思绪有点乱了，求屡屡。
就是现在菜单栏的这些按钮是从后台拿过来的，然 ...

简单的，就是记录下data组件按正常加载完成后的index索引
下次重新加载完data组件，就按照这个索引的顺序重新排序下data组件中的数据即可！

波斯大香蕉

liangyongfei 发表于 2015-12-18 14:44
简单的，就是记录下data组件按正常加载完成后的index索引
下次重新加载完data组件，就按照这个索引的顺序 ...

这要怎么写- -不会。

jishuang

如果数据是存到数据库中可以记一个序号列，在拖动修改顺序的是修改序号列的值，获取数据的时候直接排序加载数据

波斯大香蕉

jishuang 发表于 2015-12-21 15:48
如果数据是存到数据库中可以记一个序号列，在拖动修改顺序的是修改序号列的值，获取数据的时候直接排序加载 ...

现在在没有数据库，没有后台的情况下，单单要这样写，要怎么获取这个序列啊- - 代码不会写。
交换代码就是下面那句        // 交换排序
                new Sortable(document.querySelector("[xid=div4]"), {
                        group : "omega"
                });
                new Sortable(document.querySelector("[xid=div5]"), {
                        group : "omega"
                });
但是值是从data取的，JS我也发打包发一下。

liangyongfei

波斯大香蕉 发表于 2015-12-21 16:33
现在在没有数据库，没有后台的情况下，单单要这样写，要怎么获取这个序列啊- - 代码不会写。
交换代码就是 ...

你看下data组件的api！
getRowIndex 方法就是获取行的index索引

如果是通过索引获得行，可以使用data.datas.get()[index]

波斯大香蕉

liangyongfei 发表于 2015-12-22 15:44
你看下data组件的api！
getRowIndex 方法就是获取行的index索引

- - 可是这个拖拽的是DIV啊，并不是data，我拖拽了之后data的index并没有改变。所以，现在只有把data加载出来，然后再按div的那个序列重新排序。

liangyongfei

波斯大香蕉 发表于 2015-12-22 16:35
- - 可是这个拖拽的是DIV啊，并不是data，我拖拽了之后data的index并没有改变。所以，现在只有把data加 ...

list组件显示数据本来就是从第一条依次往下显示的，
你拖拽div到指定位置以后，实际上应该是此时就去改变data的行了，再改变行的时候记录下这个行的索引是从几变成了几，比如从5变成了3，那么下次加载数据后，使用代码实现把第5行变成第三行，其他行也是如此的

波斯大香蕉

liangyongfei 发表于 2015-12-22 21:44
list组件显示数据本来就是从第一条依次往下显示的，
你拖拽div到指定位置以后，实际上应该是此时就去改变 ...

那代码要怎么写？

liangyongfei

波斯大香蕉 发表于 2015-12-23 09:28
那代码要怎么写？

data组件中 交换行的方法是exchangeRow
获取行索引的方法是 getRowIndex
循环的方法是each

举个例子：

比如，你data组件中数据一共有5行，
第一次，你拖动第5行的数据时，可以得到当前行的索引是5，需要记录下来
然后你放到了第2行上了！这个时候就要使用each进行循环，依次将第5行数据 使用exchangeRow 方法和第4行，第三行，第二行经行交换！这是后依次记录下第四行，第三行和第二行的索引依次变成了3.4.5
第5行数据的索引就变成了2

可以用一个二维数组表示
第二维的数组中，第一个值表示当前在的索引，第二个值表示，最初data中行的索引
比如上述5个行的索引，初始时数据是这样的
[[0,0],[1,1],[2,2],[3,3],[4,4]]
当第5行变成第2行的时候，操作完成后就变成
[[0,0],[1,4],[2,1],[3,2],[4,3]]
数组中：第一个值，表示此时数据索引：01234
第二个值，表示曾经初始值索引：04123

下次又执行了一次把第5行变成第2行的操作
这个时候就变成了
[[0,0],[1,3],[2,4],[3,1],[4,2]]
曾经的索引值数据就是这样排序的了03412
（你可以画图看看，就应该能理解）
你需要做的就是通过代码维护这个数组，保证能通过当前行的索引获取到初始状态的索引值

然后，下次加载data数据完毕后，通过这个数组把原来的索引行重新排序成这个数组中记录的情况

至于代码哪儿不会写了！可以具体提问！帮您
因为逻辑比较复杂，我就不写了！呵呵