小云菜
小云菜
  • 发布:2015-09-06 17:50
  • 更新:2016-05-31 00:19
  • 阅读:4757

[BUG] 引用sortable.js和mui.js不兼容,无法排序

分类:MUI

最新的代码示例在 https://github.com/phillyx/MUIDemos/blob/master/examples/PHILLYXDEMOS/sortable/sort3.html

下面的问题就不要看了

项目需要用到列表排序功能,不引用mui.js是没问题的,引用后报错,不兼容。
demo已上传到附件里面

2015-09-06 17:50 负责人:无 分享
已邀请:
小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

这个bug我已经解决了。
bug描述: 在引入mui后,touch事件和drag都触发,在drag事件下dataTransfer对象未定义
对此做规避就可以了

小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

现在有个问题,当对target dom绑定sortable后,其他原生事件包括tap事件等不可用了@DCloud_MUI_FXY

小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

首先承认是我的错,引用的sortable.js是0.4.1版本的,比较旧,不兼容mui.js,虽然我花费了好长时间终于解决了这个bug,然并卵;新版本1.2.1是没问题的。

另外“当对target dom绑定sortable后,其他原生事件包括tap事件等不可用”的问题我也做出规避解决了,具体看附件测试工程。

测试工程中集成了:

  1. 单击预览
  2. 长按删除
  3. 排序后提交
  • DCloud_UNI_FXY

    不需要这么复杂,配置sortable的options的dropBubble为true即可。不要让他阻止事件冒泡

    2015-09-07 18:34

  • 小云菜 (作者)

    2015-09-09 11:35

小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

后来者悉知:
有个问题需要注意下,当列表项较多高度大于屏幕高度时,从bottom到top的拖放排序,如果有header的话是不可用的。
有如下两种解决方案
1.更改css

header {  
                position: static !important;  
            }  
            .mui-content {  
                padding: 0 !important;  
            }

2.建立父子页面,header存于父页面

方案1不推荐使用,因为下拉并超出屏幕高度时,header不在固定在顶部。
建议使用方案2

小云菜

小云菜 (作者) - 相关代码及分享在http://www.cnblogs.com/phillyx

宙公子

宙公子

这个问题,我也要入坑了

宙公子

宙公子

你的代码,排序删除的例子,点排序 删除几个之后 就无法长按排序了,请问怎么修改?

宙公子

宙公子

就删除2个之后 长按就无法排序了

  • 小云菜 (作者)

    看示例https://github.com/phillyx/MUIDemos/tree/master/examples/PHILLYXDEMOS/sortable

    2016-03-23 20:40

小人物

小人物

马上我也要入坑。我的坑可能更大。我的list还有测换出现删除,置顶功能。哎~~ 么有sample。

该问题目前已经被锁定, 无法添加新回复