Drag And Drop Listbox Item

[Playerdark]

After reading the examples I thought I could add drag and drop for listbox items by adding a drag container as a child to a listbox item, but then realized that the items are not derived from the windows class. I suppose there must be a reason that they are not windows so my question is is there any other obvious way to do it? Right now I think to add a drag container to the whole listbox and drag that and when it is dropped on anothr listbox just transer the active item

[Turtle]

I've done this with an ItemListbox instead of Listbox, but it requires a little work.

The ItemListbox, unlike the Listbox, uses "ItemEntry" Windows for it's items. ItemEntry windows inherit the Window class which allows them to have child Windows. So what I do (and it's a little convoluted but it works and looks nice) is to create my ItemListbox, create ItemEntry windows and then within the ItemEntry window, give it a child DragDropContainer window and then into that window I put a child Window with the contents of this item that you want to drag around - ie: a StaticImage or a StaticText type element.

In a .layout file it will look something like this:

Code: Select all

   <Window Type="TaharezLook/ItemListbox" Name="ItemListbox/Testonly" >
      <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
      <Property Name="TitlebarEnabled" Value="False" />
      <Property Name="Visible" Value="False" />
      <Window Type="TaharezLook/ListboxItem">
         <Property Name="Text" Value="Test 1" />
         <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
         <Window Type="DragContainer">
            <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
            <Window Type="TaharezLook/StaticImage" Name="ItemListbox/Testonly/test">
               <Property Name="UnifiedAreaRect" Value="{{0,0},{0,0},{1,0},{1,0}}" />
               <Property Name="Text" Value="Test Item" />
               <Property Name="Image" Value="set:myimageset image:myimage" />      
               <Property Name="MousePassThroughEnabled" Value="True" />
            </Window>
         </Window>
      </Window>      
   </Window>


Two things that can cause you problems:
First, if you drag your window somewhere and it isn't to come back to the list, you have to remember to remove the ItemEntry that was the original parent of the DragDropContainer - I do this in my DragDropItemDropped event and use the dragDropItem:getParent() to find this and then call removeItem.

The second thing is that the "TaharezLook/ListboxItem" defined in the TaharezLook.looknfeel file actually has it's height and width defined on the "text" property found in it which isn't much good when you don't really want it to have any text in it directly as you want that handled in the child of the DragDropContainer. To sort this out I just created an addition item in my custom .looknfeel, something like this:

Code: Select all

    <WidgetLook name="MyLookNFeel/CustomItemEntry">
        <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="SelectionBrush" initialValue="set:myimageset image:myMultiListSelectionBrush" redrawOnWrite="true" />
        <PropertyDefinition name="SelectionColour" initialValue="FF4444AA" redrawOnWrite="true" />
        <Property name="Selectable" value="True" />
        <Property name="MouseInputPropagationEnabled" value="True" />
      
      <PropertyDefinition name="RowHeight" initialValue="80" redrawOnWrite="true" />
       
        <NamedArea name="ContentSize">
            <Area>
                <Dim type="LeftEdge" >
                    <AbsoluteDim value="0" />
                </Dim>
                <Dim type="TopEdge" >
                    <AbsoluteDim value="0" />
                </Dim>
                <Dim type="Width" >
               <UnifiedDim scale="1" offset="-3" type="RightEdge" />
                </Dim>
                <Dim type="Height" >
                    <PropertyDim name="RowHeight" />
                </Dim>
            </Area>
        </NamedArea>
      
      <ImagerySection name="selection">
            <ImageryComponent>
                <Area>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
                <ImageProperty name="SelectionBrush" />
                <ColourProperty name="SelectionColour" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="label">
                    <ColourProperty name="TextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="SelectedEnabled">
            <Layer>
                <Section section="selection" />
         </Layer>
        </StateImagery>
        <StateImagery name="SelectedDisabled">
            <Layer>
                <Section section="selection" />
                <Section section="label">
                    <ColourProperty name="SelectedTextColour" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>


Be sure to create a new entry for this in your .scheme file linking it to the ItemEntry window.

The above defines a new ItemEntry looknfeel that takes a parameter called "RowHeight", which allows you to define your row height, either in your .layout file or in code using the setProperty() function. To use it, when you define a new child window in your ItemListbox, rather than make it a "TaharezLook/ListboxItem", make it one of the above, using whatever name you end up giving it.

Others might have an easier method.

I'm actually 80% of the way through creating a patch for the ItemListbox to modify it's behaviour (see: viewtopic.php?f=3&t=5100) and as a part of this I've started a Lua script that demonstrates the above. Unfortunately I've lost most of my free time for the moment due to work and as such can't finish it for another month or so

[Playerdark]

Thanks a bunch, I had the same idea but that's when I realized it doesn't work with the simple items. I should have mentioned that I have to use the Multicolumn list box since I need columns for some other qualities of the items dragged so that is not an option I am now using the column where I show the colour of the item as the drag source, of course the item has to be selected first which is basically the same problem I asked about elsewhere, when I want to bring up the context menu for an item, the right mouseboutton won't select it and I have to select it first with the left mouse button for both cases.

Since these cases are all from a practical viewpoint while using CEGUI I hope that Eddie might take them up in a later version. Other than those problems I found CEGUI pretty powerful and easy to use, moreflexible than the Irrlicht GUI I used in the past