×

Loading...
Ad by
  • 技多不压身，工到自然成：安省技工证书特训班，点击咨询报名！
Ad by
  • 技多不压身，工到自然成：安省技工证书特训班，点击咨询报名！

@Las Vegas

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

nicetomeetyou(淡定灌水)
本文发表在 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
(#5948178@0)
Last Updated: 2010-3-16
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

  • 现在社区游泳池招救生员巡逻，过一会还要不停的点人头，这工作是否很快就被AI代替了，装一个摄像头后面是AI处理系统，这样只招一个等着救人就行了，人头沉下水一定时间立马强光照射，还可以分析水下人的状况来判断是否溺水等
  • 新冠疫苗引发心肌炎? 最新研究这样看
  • 这道几何题有解吗?
  • SAM 2 Demo
  • 如何在 AWS EC2 实例上构建 WordPress 应用程序?
    • 枫下论坛主坛 /  工作学习 /  学科技术讨论