Build a web page using pure HTML/CSS/JS to display data tree structure. (2) Program JS for drag-and-drop.

3.11 17:03 started.

3.14 19:54 update:

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.

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.


12:53AM, March 16, 2010:

Just finished a solution (compatible with most browsers) and implemented. Here is how I do it:

(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.

家庭内部网站：两口子可在上班期间在一个不需要任何EMAIL， REGISTRATION ID的内部网里计划家庭的安排，共享BOOKMARK， 给家里每个孩子布置任务。

家庭内部网站：两口子可在上班期间在一个不需要任何EMAIL， REGISTRATION ID的内部网里计划家庭的安排，共享BOOKMARK， 给家里每个孩子布置任务。查看任何年，月，日的TODO LIST， BLOG。有用。

每个用户可加入不同的组,每个组拥有自己的MENU, BOOKMARK, ....... 所有这些都可用户自定义

每个用户可加入不同的组,每个组拥有自己的MENU, BOOKMARK, ....... 所有这些都可用户自定义, .... 我反对在java code 中使用annotation. Class lazy loading, portlet authentication, attribute, theme, ... 全部在数据库中定义.