Drag and drop via Lua API not working as expected.

[germandiagogomez]

Dear RmlUi,

I am trying to implement drag and drop from a Lua API. I registered the Lua API into my context already via Rml::Lua::Initialise()

I am implementing drag and drop from one list on the left to one on the right side to have friends for a match before it starts.

Code for Context in questions below

My rcss has:

...
table img {
  drag: clone;
}
...

This is my rml code (look at the img data-value part, this is the image I drag):

...
<div id="match_preparation_list_content" class="lists-container">
        <div class="minititle-wrapper">
            <h3 class="minititle">¡Arrastra el avatar de tres amigos a la lista de la derecha para empezar!</h3>
        </div>
        <div class="table-container left">
            <table>
                <thead>
                <tr>
                    <td class="blueish-bold" colspan="2">Amigos disponibles</td>
                </tr>
                </thead>
                <tbody>
                <tr data-for="friend, idx : model.availableFriends" >
                    <td><img data-value="friend.userId" class="miniature" src="overlays/incognito.tga"/></td>
                    <td>{{friend.nickName}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div id="add-match-friend" class="table-container right"
        data-class-blue-selection-border="model.hoveringOverAddFriendTarget">
            <table>
                <thead>
                <tr>
                    <td class="greenish" colspan="2">Invitados a jugar (faltan 3)</td>
                </tr>
                </thead>
                <tbody id="tbody">
                    <tr data-for="friend : model.nextMatchFriends " data-value="friend.userId">
                        <td><img class="miniature" src="overlays/incognito.tga"/></td>
                        <td>{{friend.nickName}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
...

My Lua code adds an event listener:

...
rmlui.contexts["main"]:AddEventListener('dragdrop', function(event)
          local drag_element = event.parameters.drag_element
          LOG:debug('Event: ' .. type(event))
          LOG:debug('drag_element type is ' .. type(drag_element))
          LOG:debug("Target element id " .. event.target_element.id)
          LOG:debug("Current element id " .. event.current_element.id)
          LOG:debug("Drag element value " .. drag_element:GetAttribute('data-value'))
        end)
    startButton:AddEventListener('click', function()
                                   CurrentAction = ExitActions.goToMatch
    end)
...

Output for drag and drop

When I drag and drop I obtain this output (from my log):

2025-05-30 12:26:29.314] [OnlineRoomsScreen] [debug] [thd 936483] over
[2025-05-30 12:26:29.861] [OnlineRoomsScreen] [debug] [thd 936483] Event: userdata
[2025-05-30 12:26:29.861] [OnlineRoomsScreen] [debug] [thd 936483] drag_element type is userdata
[2025-05-30 12:26:29.861] [OnlineRoomsScreen] [debug] [thd 936483] Target element type is userdata
[2025-05-30 12:26:29.861] [OnlineRoomsScreen] [debug] [thd 936483] Current element type is userdata
[2025-05-30 12:26:29.861] [OnlineRoomsScreen] [debug] [thd 936483] Target element id add-match-friend
[2025-05-30 12:26:29.861] [OnlineRoomsScreen] [debug] [thd 936483] Current element id main
[2025-05-30 12:26:29.861] [Rml] [warning] [thd 936483] [string "LOG = Logger.get("OnlineRoomsScreen")..."]:169: attempt to index a userdata value (local 'drag_element')
stack traceback:

Questions

My problems are basically:

1. why current element id is "main", I would expect it to be an empty id, since my img is the dragged element and it does not have any id. However the current element id seems to be where the Event Listener was attached?
2. I cannot use the Lua API, it fails and my elements are just opaque 'userdata' without any possibility to invoke the APIs for getting attributes, etc. I would like to get the 'data-value' field in some way for the dragged img, since this is what gives me information about what I dragged.

Thanks for your time!

[mikke89]

Hello, I appreciate the nicely detailed post.

So events in RmlUi, just like in HTML, propagate from the root, to the target element, and bubbles back up again to the root. Since you attached the event handler directly to the context, this effectively attaches it to the root element. The root element ID takes the name of the context, thus main in your case. So when your callback is called, the event is handled at the root and the current id is main.

Secondly, I think you are not using the data bindings entirely correct here. In particular with the data-value attributes. This attribute sets up a two-way binding on the value attribute. I think what you rather want is something like data-attr-friend_id=friend.userId, which will evaluate this expression and set the attribute friend_id to that value. In your Lua script, you should now be able to read this friend_id attribute on the respective <img> and <tr> elements.

I don't remember exactly how the event parameters work in the Lua script. Seems to be some issues around that as well. But getting the drag_element from the event parameter is the right idea at least. Try fixing the above first, then maybe it needs to be accessed like event.parameters["drag_element"]? Not entirely sure here. Let us know how it goes.

[germandiagogomez]

First of all, thank you for your support.

There is some progress. I can already access the attribute by using data-attr-friend_id as you suggested attached to the img generated in the rcss data-for (see in my top post for reference).

But I have a problem with the event listening itself. It won't trigger anymore if I add it to each element of interest.

    local availableFriendsTable = ViewModel.document:GetElementById('available-friends-table')
    local usersImgs = availableFriendsTable:GetElementsByTagName('img')
    LOG:debug('Users ' .. #usersImgs)
    for _, elem in ipairs(usersImgs) do
        elem:AddEventListener('dragdrop', function(event)
                              local drag_element = event.parameters["drag_element"]
                              LOG:debug('Event: ' .. type(event))
                              LOG:debug('drag_element type is ' .. type(drag_element))
                              LOG:debug('Target element type is ' .. type(event.target_element))
                              LOG:debug('Current element type is ' .. type(event.current_element))

                              LOG:debug("Target element id " .. event.target_element.id)
                              LOG:debug("Current element id " .. event.current_element.id)
                              -- LOG:debug("Drag element value " .. drag_element:GetAttribute('friend_id'))
                          end)
    end

I am trying to attach the dragdrop event to each of the img so that I do not get anymore main as the current element. Note that the img is generated in a data-for loop and I get by tag name the elements. It does work up to that step at least.

However, the event never triggers. I am pretty sure that the event listener loop is executed, etc. so the event listeners should be in fact attached. However, this is done after loading and showing the document. It should be problematic?

I also tried this in the rcss, with no luck:

<td><img ondragdrop="DragDrop(event)" data-attr-friend_id="friend.userId" class="miniature" src="overlays/incognito.tga"/></td>

where function DragDrop is a global in my Lua file:

function DragDrop(event)
    LOG:debug('drag drop working...')
end

and it seems that the event is not invoked.
Thanks.

[germandiagogomez]

By the way, for this code dragstart and dragend are triggered but not dragdrop:

local availableFriendsTable = ViewModel.document:GetElementById('available-friends-table')
            local usersImgs = availableFriendsTable:GetElementsByTagName('img')
            LOG:debug('Users ' .. #usersImgs)
            for _, elem in ipairs(usersImgs) do
                elem:AddEventListener('dragstart', function(event)
                                                      LOG:debug('Drag start')
                                                  end)
                elem:AddEventListener('dragend', function(event)
                                              LOG:debug('Drag end')
                                                                  end)
                elem:AddEventListener('dragdrop', function(event)
                                      LOG:debug("Drag drop")
                                      --local drag_element = event.parameters["drag_element"]
                                      ---- LOG:debug('Event: ' .. type(event))
                                      --LOG:debug('drag_element type is ' .. type(drag_element))
                                      --LOG:debug('Target element type is ' .. type(event.target_element))
                                      --LOG:debug('Current element type is ' .. type(event.current_element))
                                      --
                                      --LOG:debug("Target element id " .. event.target_element.id)
                                      --LOG:debug("Dragged friend is " .. event.current_element:GetAttribute('friend_id'))
                                      -- LOG:debug("Drag element value " .. drag_element:GetAttribute('friend_id'))
                                  end)
            end

[mikke89]

Consider this from the dragdrop documentation:

Sent at the end of a drag operation to the element the cursor is hovering over.

Looks like in your case the img elements are the ones being dragged. However, the events are sent to the element being hovered, rather than the img element. Thus, you should rather attach the event listener to the destination.

Also, be aware that you can read the target element from the event. So even if you attach the element at the root, you can look at where the event is going. To me, that seems a bit simpler than attaching the listeners to all the individual elements.

[germandiagogomez]

@mikke89 in fact, this was the problem. At re-reading the documentation last night I noticed. I will leave the thread open for now but I think everything should be solved by now, so I will correct my code and move on. :)

I will stick, if it works (it should I guess) to using the target from the event. But I am not sure it was working last time I checked since I tried so much stuff.

EDIT:But one question is remaining: can I access the dragged element from dragdrop?

Because this:

local drag_element= event.parameters.drag_element

-- This line fails. I suspect it is of the incorrect type in Lua side? 
drag_element:GetAttribute('friend_id')

-- However, other things can be accessed
local target_element = event.target_element

-- Works
LOG:debug(target_element.tag_name)

Thanks for all your help.

[mikke89]

Nice, sounds like things are progressing then.

On your question, I think again the event parameters are not used correctly. Can you try:

local drag_element = event.parameters['drag_element']

[germandiagogomez]

@mikke89 I tried with the same result as event.parameters.drag_element:

attempt to index a userdata value (local 'drag_element')

[mikke89]

Ah, yes, I see the issue. We store pointers as void* in our internal Rml::Variant. When reading this value in Lua, we convert it to a "light user data":

RmlUi/Source/Lua/Utilities.cpp

Line 98 in 0c96c0e

case Variant::VOIDPTR: lua_pushlightuserdata(L, var->Get<void*>()); break;

Thus the error message you get, Lua simply doesn't know that this is really an Element* under the hood.

We don't have type information here, we only know this is an Element* from documentation. We could in principle add a way to interpret it as an Element, but it's a bit dangerous, not ideal from a Lua script which shouldn't normally expose dangerous behavior like that. We could perhaps use std::any when we move to C++17 for some extra safety, and expose it as an Element in Lua scripts.

Are you able to find some workarounds in the meantime?

[germandiagogomez]

@mikke89 yes. As a workaround what I am doing is to capture the dragged element from event.target_element in 'dragstart' and use it in 'dragdrop' later.

It is not ideal but it works bc those are typed correctly.

Maybe you can add .asElement() and others and pass something more typed as you suggested, storing a pointer inside any that can be cast back.