HTML tree for hybrid mobile app

北战南征 提交于 2019-12-09 20:13:39

问题


Looking for a tree (or nested list) UI component that would work for a hybrid mobile app and would have the following properties:

  • drag-and drop
  • animations (visual feedback) for insert/delete/update and expand/collapse and drag/hover/drop
  • good performance on mobile
  • open-source (I would accept paid open-source, dual-licensing, etc.)
  • modern, clean look
  • "modern" implementation, for example aligning itself with philosophies like AngularJS, ReactJS, Ionic or whatever are the recent cool kids on the block

My research so far has found the following ones:

  • https://angular-ui-tree.github.io/angular-ui-tree/#/cloning (no animations)
  • https://www.jstree.com/demo/ (drag and drop problems on mobile)
  • many others on http://www.jqueryrain.com/demo/jquery-treeview/ but I haven't found anything that would look designed for mobile

None of them really seems to work well in mobile browser (I'm testing on Android 4.x, 5.x, 6.x). Following issues seem to occur:

  • drag events seem to not be interpreted properly, instead unexpected things happen, like scrolling or text selection (subjectively: does not "seem right" to me as a user to manipulate the tree)
  • choppy animations
  • clickable elements too small for tapping via finger
  • about half of the solutions sadly look like windows 95 Explorer tree, which is not good on the eyes and does not seem modern and clean

Can you advise such a UI component that would work or at least would be a good starting point for my own enhancements?

Are the mobile browsers ready to host such a sophisticated component, in terms of input events, layout, performance, animations, etc.?

Full disclosure: I come from a Java+Android background, expanding into hybrid mobile apps, so my paradigm might not yet be fully adjusted.

The backend (e.g. Firebase) part is here: Using firebase tree structure to represent a "document outline" structure directly

来源:https://stackoverflow.com/questions/39108063/html-tree-for-hybrid-mobile-app

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!