×

Loading...
Ad by
  • 推荐 OXIO 加拿大高速网络,最低月费仅$40. 使用推荐码 RCR37MB 可获得一个月的免费服务
Ad by
  • 推荐 OXIO 加拿大高速网络,最低月费仅$40. 使用推荐码 RCR37MB 可获得一个月的免费服务

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

本文发表在 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
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.
    • 我知道一点。你是整个Image移动还是部分移动?部分移动我想会难很多。
      • 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.
    • Just finished a solution (compatible with most browsers) and implemented. Here is how I do it.
      本文发表在 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