起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

楼主: 波斯大香蕉

[结贴] 菜单栏拖拽效果

  [复制链接]

186

主题

1012

帖子

1663

积分

金牌会员

Rank: 6Rank: 6

积分
1663
QQ
 楼主| 发表于 2015-12-18 14:35:08 | 显示全部楼层
liangyongfei 发表于 2015-12-18 10:56
好的!写完了,记得分享下您的经验!大家相互学习下,谢谢

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

使用道具 举报

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

简单的,就是记录下data组件按正常加载完成后的index索引
下次重新加载完data组件,就按照这个索引的顺序重新排序下data组件中的数据即可!
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

186

主题

1012

帖子

1663

积分

金牌会员

Rank: 6Rank: 6

积分
1663
QQ
 楼主| 发表于 2015-12-21 09:37:37 | 显示全部楼层
liangyongfei 发表于 2015-12-18 14:44
简单的,就是记录下data组件按正常加载完成后的index索引
下次重新加载完data组件,就按照这个索引的顺序 ...

这要怎么写- -不会。
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35880
发表于 2015-12-21 15:48:43 | 显示全部楼层
如果数据是存到数据库中可以记一个序号列,在拖动修改顺序的是修改序号列的值,获取数据的时候直接排序加载数据
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

186

主题

1012

帖子

1663

积分

金牌会员

Rank: 6Rank: 6

积分
1663
QQ
 楼主| 发表于 2015-12-21 16:33:12 | 显示全部楼层
本帖最后由 波斯大香蕉 于 2015-12-21 16:34 编辑
jishuang 发表于 2015-12-21 15:48
如果数据是存到数据库中可以记一个序号列,在拖动修改顺序的是修改序号列的值,获取数据的时候直接排序加载 ...

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

Sortable.zip

3.09 KB, 下载次数: 297

回复 支持 反对

使用道具 举报

发表于 2015-12-22 15:44:56 | 显示全部楼层
波斯大香蕉 发表于 2015-12-21 16:33
现在在没有数据库,没有后台的情况下,单单要这样写,要怎么获取这个序列啊- - 代码不会写。
交换代码就是 ...

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

如果是通过索引获得行,可以使用data.datas.get()[index]
qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

186

主题

1012

帖子

1663

积分

金牌会员

Rank: 6Rank: 6

积分
1663
QQ
 楼主| 发表于 2015-12-22 16:35:39 | 显示全部楼层
liangyongfei 发表于 2015-12-22 15:44
你看下data组件的api!
getRowIndex 方法就是获取行的index索引

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

使用道具 举报

发表于 2015-12-22 21:44:18 | 显示全部楼层
波斯大香蕉 发表于 2015-12-22 16:35
- - 可是这个拖拽的是DIV啊,并不是data,我拖拽了之后data的index并没有改变。所以,现在只有把data加 ...

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

使用道具 举报

186

主题

1012

帖子

1663

积分

金牌会员

Rank: 6Rank: 6

积分
1663
QQ
 楼主| 发表于 2015-12-23 09:28:21 | 显示全部楼层
liangyongfei 发表于 2015-12-22 21:44
list组件显示数据本来就是从第一条依次往下显示的,
你拖拽div到指定位置以后,实际上应该是此时就去改变 ...

那代码要怎么写?
回复 支持 反对

使用道具 举报

发表于 2015-12-23 11:32:56 | 显示全部楼层

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数据完毕后,通过这个数组把原来的索引行重新排序成这个数组中记录的情况

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

qq:1912779713
WeX5教程--WeX5下载
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-29 12:53 , Processed in 0.121231 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表