2

We've got a request from a customer to support the following scenario:

  • on a page we have a container: div element which is at the same time dojo.dnd.Source.

  • inside the container we've got 9 div elements with similar content: 2 buttons and 2 comboboxes

  • a user should be able to define the sequence of those 9 div elements by simply dragging them around inside the container.

The task is to present a possible layout preview while dragging.

Will appreciate any ideas.

Jonas G. Drange
  • 8,749
  • 2
  • 27
  • 38
Bibi Watson
  • 23
  • 2
  • The easiest thing was to go pure CSS way. Dojo sets dojoDndItemOver class, so the idea was to change the width of a div.dojoDndItemOver and to set padding. Worked partly: once in a while worked as expected, but once in a while was blinking/jumping badly. Moreover, in this approach were difficult to exclude div.dojoDndItemAnchor elements. – Bibi Watson Aug 14 '12 at 14:12
  • Currently I am trying to use eventHandlers to do the series of drops, and to roll back on onDndCancel. Not even sure that I'm going the right way. – Bibi Watson Aug 14 '12 at 14:15

1 Answers1

1

Focusing on your comment and first attempt at this solution, I humbly suggest the following:

If things are being animated and sensitive to mouse pointer changes you should separate the two:

  • Leave the element with the drag/drop event subscription (the parent) alone. Do not change its appearance ever.
  • Create an element (the child) inside this element that gets animated, but does not affect its parent.
  • The parent can be transparent.

Can this be of help?

Jonas G. Drange
  • 8,749
  • 2
  • 27
  • 38