Flex/Flash/Actionscript

List control for the one-armed man – take two

Here’s my second attempt at making a List control for Flex that has the functionality of using the Control and Shift keys, but without making the user actually press the Control or Shift keys. For those poor programmers who have been crippled by RSI, now you can at least drag around list data with your one good hand.

This version is much better than the previous version. Now you click on an item and drag to select multiple items. You can still drag and drop items from one list to another. The only difference is that you must first select the items, then click and drag to move items to the other list. Control-click functionality is the default if you only click one item. If you drag to select items and try to select below the visible items it will scroll the list into view.

Here’s the source.

This movie requires Flash Player 9.

Related:

  • Pretty sweet logo, whoever designed that must be pretty much the best person in the world. Get your 360|Flex stuff here. And if you haven't registered for 360Flex, do that here.
    Tags: flex
  • Since the next 360|Flex is fast approaching, I thought I'd post the full recording of my session at the last 360|Flex in Seattle. You can do whatever you want with this video, embed it wherever, watch it wherever, you can even download the original mp4 video file. Hopefully the embedded…
    Tags: flex
Standard

9 thoughts on “List control for the one-armed man – take two

  1. Hello again,

    I’m playing with the style of te DragSelectList component and I was wondering if the textSelectedColor can be used as in a normal list?

    John

  2. Nice. The drag-based selection is very intuitive. I expected the selection to stay in place when I dropped the items in the second list, though. Once you drop items using the current behavior, you lose the visual connection made by the selection color, and I couldn’t remember what got dropped until I specifically checked to see which items appeared out of order.

  3. @John – as far as I know you can style it just like you would a normal List control. It’s just a simple extension of List, so any styles that worked for List should work for DragSelectList

    @Josh – yeah, I noticed this too. I think this is how the normal List works as well (ie the selection goes away when you drop into a new list control). That shouldn’t be all that hard to change. Basically just make it so that once new items are dropped and added to the dataprovider, make those items selected. I might look into this, shouldn’t be hard.

  4. handitan says:

    Hi Doug,

    I just want to say thank you for making this and having the source code available.
    I need to integrate this solution in a datagrid instead of a list. So far the integration went pretty well.

    Again thank you for saving me from getting my head stomped ^_^

  5. Philip says:

    Hi, its great, how do I use code to select all of the checkboxes or de-select all of the checkboxes?
    I wrote the following code, but it doesn’t TICK the boxes upon the select all.

    public function deselectAll():void {
    for (var loop:Number = 0; loop

  6. Joe says:

    Regarding John’s reply above,

    It appears that you cannot use the style “textSelectedColor” because the rendered item is a checkbox, where the style property for the text color is “color”.

    This is because the “checkbox” used in the itemrenderer doesn’t know anything about the various item states in a listbox such as textRollOverColor, selectionColor, etc…

    Not quite sure what the solution is though… maybe some code is needed in listEventHandler() in the item renderer that retrieves the style from the listbox for textSelectedColor and sets it on the checkbox?

    Joe

Comments are closed.