Dojo dnd: Avatar Positioning

Is it possible to change the location of an avatar using the dojo dnd api toolkit? At the moment, when dragging, the avatar of the dragged item appears to the right and below the mouse cursor. I want it to be in the same position as the mouse cursor. I applied some usability tests in my application, and most people seem to be trying to drag the avatar into the drag area, rather than moving the cursor over the drop area. Any input would be nice. Thanks!

+4
source share
1 answer

Sorry, this is not possible for technical reasons.

UPDATE: for popular searches, these are technical reasons:

  • When you have a node directly under the mouse, node receives all mouse events.
  • Mouse events preempt the parent chain.
  • Now imagine that you move this node with the mouse - this node will always receive all mouse events.
  • This means that any other node, for example, the target cannot receive mouse events if it is not the parent of the moved node. This is usually not the case.

But I know that other people can do it! It should be possible! Yes, you can & hellip; basically:

  • Register all target nodes.
  • Let you capture the corresponding mouse movement events directly on the top-most parent (document).
  • When we find a drag operation, do the following:
    • Calculate the geometry (bounding box) of all targets.
    • At each movement of the mouse, you can check whether the current position of the mouse coincides with the target. Bonus points for the student β€œA +”: detect matches with other nodes, for example, when the target is partially hidden for cosmetic reasons and correctly processes this situation.
    • If the current position of the mouse overlaps with the target, give the opportunity to initiate the β€œdrop possible” actions, for example, show some hints so that the end user knows that she can refuse.

Why is Dojo not doing this? For a number of technical reasons (finally, we got!):

  • A node geometry calculations are generally erroneous in most browsers. As soon as tables, or any other non-trivial means of placement are involved, you cannot be 100% sure that the bounding box is correct.
  • Geometric computing is an expensive operation, and we must do this at least once with every drag operation for all purposes, assuming that no changes can be made during the drag operation (not always in the case). The browser can update nodes for many reasons - β†’ it can move / resize existing targets, so we must be vigilant.
  • Typically, the calculated fields are stored in a list β†’ checking the list for intersections - O (n) (linear) β†’ does not scale, but the number of targets increases.
  • All mouse event handlers must be fast, otherwise the browser mouse event handler may be broken, resulting in unpredictable side effects. See the previous paragraphs for reasons why mouse event processing can be slow.
  • It is possible to improve the linear search, for example, you can use 2D spatial trees, but this leads to more (significantly more) JavaScript code β†’ more material to load on the client side β†’ usually it does not cost.

How do I know that? Because Dojo used to have this type of drag'n'drop in earlier versions, and we are tired of the battle problems described above. Any improvement was a tough battle that increased the size of the code. Finally, we decided not to invent and replicate the mechanisms already created in the browser. The browser does almost the same job: it computes the geometry of the nodes, finds the base node, and sends the mouse move event accordingly.

The current implementation does not use mouse movement events and does not calculate geometry. Instead, it relies on mouse / shutdown events detected by targets after the start of a drag. It works reliably and scales well.

Another wrinkle in this story: Dojo treats goals as containers - a very common use case (shopping carts, reordering items, editing hierarchies). Currently, linear containers and common trees are implemented, custom containers are possible. When dragging and dropping, you can see and drop the dragged items to the correct position in the target container, for example, pasting them between existing items. Implementing this function using geometric computations and checks will be overly expensive.

+6
source

All Articles