How to use droppable widget on mobile

#1

I’m trying to create a very simple template similar to a kanban board, with categories for “ToDo” and “Doing”. I want to be able to drag links between each category. I was able to get this working on my laptop, but it doesn’t seem to work on mobile. Whenever I try to drag a link on my phone, it first shows the context menu and then opens the tiddler without allowing me to drag the link. I am using the latest version of Chrome on Android 12, and I am serving a the wiki over WebDAV. I have the mobile drag and drop “shim” plugin enabled as well.

I am including my code below. Would anyone be able to point me towards what I might be doing wrong? Thank you!

\define move-to-doing()
    <$fieldmangler tiddler=<<actionTiddler>>>
        <$action-sendmessage 
            $message="tm-add-tag"
            $param="SprintDoing"
        />
        <$action-sendmessage 
            $message="tm-remove-tag"
            $param="SprintTodo"
        />
    </$fieldmanger>
\end

\define move-to-todo()
    <$fieldmangler tiddler=<<actionTiddler>>>
        <$action-sendmessage 
            $message="tm-add-tag"
            $param="SprintTodo"
        />
        <$action-sendmessage 
            $message="tm-remove-tag"
            $param="SprintDoing"
        />
    </$fieldmanger>
\end

<$droppable actions=<<move-to-todo>>>

    !ToDo

</$droppable>

<$list filter="[tag[SprintTodo]]">
    <$droppable actions=<<move-to-todo>>>

        <$link>
            <<currentTiddler>> 
        </$link>

    </$droppable>
</$list>

<$droppable actions=<<move-to-doing>>>

    !Doing

</$droppable>

<$list filter="[tag[SprintDoing]]">
    <$droppable actions=<<move-to-doing>>>

        <$link>
            <<currentTiddler>>
        </$link>

    </$droppable>
</$list>

Regards,
Bobby

#2

I found a workaround. Instead of just using links, I added in a span element inside of a draggable widget. The only issue is that when dropping the elements on mobile, it creates a duplicate tiddler with brackets around the name. It’s strange - this only happens on Chrome for Android, not the desktop version. I may just add some links to each list item to move them around.

#3

This workaround worked for me.

I use it for my opened tiddlers list:

\define drop-actions()
<!-- Workaround from Saq Imtiaz: https://github.com/Jermolene/TiddlyWiki5/issues/5102#issuecomment-740556682 -->
<$vars startBrackets="[[" endBrackets="]]">
<$vars actionTiddler={{{[<actionTiddler>trim:suffix<endBrackets>trim:prefix<startBrackets>]}}}>
<$action-listops
    $tiddler=<<tv-story-list>>
    $subfilter="+[insertbefore:currentTiddler<actionTiddler>]"
/>
</$vars>
</$vars>
\end

<div class="tc-sidebar-tab-open">
<$list
    filter="[list<tv-story-list>]"
    history=<<tv-history-list>>
    storyview="pop"
>
    <div class="tc-sidebar-tab-open-item">
        <$droppable
            actions=<<drop-actions>>
            enable=<<tv-enable-drag-and-drop>>
        >
        <div class="tc-droppable-placeholder"/>
        <div>
        <$draggable tiddler=<<currentTiddler>>>
            <$button
                message="tm-close-tiddler"
                tooltip={{$:/language/Buttons/Close/Hint}}
                aria-label={{$:/language/Buttons/Close/Caption}}
                class="tc-btn-invisible tc-btn-mini tc-small-gap-right"
            >
                {{$:/core/images/close-button}}
            </$button>
            <$link to={{!!title}}>
                <$view field="title"/>
            </$link>
        </$draggable>
        </div>
        </$droppable>
    </div>
</$list>
<$tiddler tiddler="">
    <div>
        <$droppable
            actions=<<drop-actions>>
            enable=<<tv-enable-drag-and-drop>>
        >
            <div class="tc-droppable-placeholder">
                {{$:/core/images/blank}}
            </div>
            <div style="height:0.5em;"/>
        </$droppable>
    </div>
</$tiddler>
</div>
1 Like
#4

Awesome - thank you! I will try this out.