×

Loading...
Ad by
  • 最优利率和cashback可以申请特批，好信用好收入offer更好。请点链接扫码加微信咨询，Scotiabank -- Nick Zhang 6478812600。
Ad by
  • 最优利率和cashback可以申请特批，好信用好收入offer更好。请点链接扫码加微信咨询，Scotiabank -- Nick Zhang 6478812600。

@Las Vegas

The purpose of this one is to display a tree structure on the page for a certain data mass. Any leaf can be drag-and-dropped between the same level of leafs, or move along the tree branches.

nicetomeetyou(淡定灌水)
From the UI, the actions to be used are mouse key on and down, then you build move function yourself.


A coordinate array of any leafs of potential targets which the moving leaf will be dropped must be stored when the page is loaded, so we can trace the movement of the leaf and know its destination, and then the relative handler will be called.

The DOM must maintain the DOM changes.

From server side, you must have request handler to handle the ajax request to update data on either the conversation objects, or, data store on backend,

Those are my plan to implement a general solution.
(#5945070@0)
Last Updated: 2010-3-14
This post has been archived. It cannot be replied.
Report

Replies, comments and Discussions:

  • 工作学习 / 学科技术讨论 / Homework, homework: (1) Build a web page using pure HTML/CSS/JS like the one I offer link here. (2) Program JS for drag-and-drop.
    -nicetomeetyou(淡定灌水); 2010-3-11 (#5939235@0)
    • 我知道一点。你是整个Image移动还是部分移动？部分移动我想会难很多。 -registereduser(立牌坊); 2010-3-14 (#5944948@0)
      • The purpose of this one is to display a tree structure on the page for a certain data mass. Any leaf can be drag-and-dropped between the same level of leafs, or move along the tree branches. -nicetomeetyou(淡定灌水); 2010-3-14 {602} (#5945070@0)
        From the UI, the actions to be used are mouse key on and down, then you build move function yourself.


        A coordinate array of any leafs of potential targets which the moving leaf will be dropped must be stored when the page is loaded, so we can trace the movement of the leaf and know its destination, and then the relative handler will be called.

        The DOM must maintain the DOM changes.

        From server side, you must have request handler to handle the ajax request to update data on either the conversation objects, or, data store on backend,

        Those are my plan to implement a general solution.
    • Just finished a solution (compatible with most browsers) and implemented. Here is how I do it. -nicetomeetyou(淡定灌水); 2010-3-16 {1185} (#5948178@0)
      本文发表在 rolia.net 枫下论坛(1) design a data structure in MySql, create tables.
      (2) design a stylesheet for a portlet to display data tree structure.
      (4) design javascript library wrapped in JSP for dynamic session id, and language support.
      (5) In JS library, design mousedown, mouseup, mousemove functions, ajax call, portlet refresh.
      (6) In application tier, design ajax request handler, reuse stylesheet in (2) to be response.

      Next improvement:

      (1) when an item is drag-and-dropped, client side DOM will be updated, instead of sending request to server. When everything is ready, DOM will be send to server and update database.

      (2) when an item is drag-and-dropped, conversation object on application tier will be updated through ajax calls, When everything is ready, data in object will be committed into database.

      Problems:

      (1) Mouseover event is laggardly fired. You have to drop item in the right angle, and with some sort of speed.

      (2) Need a loop in client to slow down item return movement when mouse is up to build better user UI experience.

      (3) Need further coding for leaf items reshuffling at the same branch level, new branch level creation, and branch leaf reshuffling.更多精彩文章及讨论，请光临枫下论坛 rolia.net

More Topics

  • Torvalds patch improves Linux performance by 2.6%
  • GitHub Spark
  • 脑洞大开，突发奇想，用力来传播信息
  • 看大家讨论日语，俺也正在认真学习。其实语言问题应该是很快也很容易就解决的，可能比自动驾驶来的还快。TREK里面，全宇宙的人都在大脑里安装了UNIVERSAL TRANSLATOR，外星人之间相互交流无障碍。废话少说，看视频。。。加上个MIC和耳机，不同国家的人就可以无障碍交流。
  • 肉脸真有搞 IT 的？Linux 把俄国中国伊朗踢出去了好像肉脸 IT 没啥感觉似的
    • 枫下论坛主坛 /  工作学习 /  学科技术讨论