Darren on Flex: Flexins, Drag 'n' Drop Mixin now with Filtering

Recap of Version 0.2

If you quickly go back and play with the demo in my previous blog you'll find that you can't drag anything on the fourth, green quadrant. This is simply because it is not enabled by (the presence of) the mixin. You'll also find that both the Panel and TitleWindow can be dropped on to the nested purple region.

Introducing Drop Filtering

With version 0.3 you can now specify an inclusion filter that restricts what can and can't be dropped on to the corresponding drop-target. Have a play with this demo of version 0.3: You'll notice 2 differences:

1. The fourth quadrant now accepts the nested purple region, but not the Panel nor the TitleWindow.
2. The nested purple region now only accepts TitleWindows, but not Panels.

You can review the commit diff at GitHub to see the difference in how the mixin is declared at the code-level.

How It Works... In Brief

The dndFilter property is of type Array. It expects an array of types i.e. the types of thing to include/allow to be dropped e.g. TitleWindow. If the dndFilter property is not specified at all, or is later assigned null, then this is treated as include/allow all types, as in wildcard semantics. That's it really. Visit the DnDMixin's homepage for more details and references to source code.

What's Next

Using the matching of types as the filter criterion might be a bit crude for some. One might want to base the filter criteria on some domain rules or something more dynamic (perhaps determined at runtime) than the types used in the UI, which incidentally do not (necessarily) bare any significance on the interaction that they are being used to support. This kind-of thing can be implemented using a filter function; the user could specify whatever criteria they want, complex or simple. Watch this space!