Is it possible to make the tiddlers in the storyriver draggable by adding draggable widget in the pagetemplate

#1

In one of my custom layout of cards as shown below,

image
image1863Ă—1153 164 KB

I want to make the tiddlers draggable. Is it possible by modiying the pagetemplate ?

\whitespace trim
\define containerClasses()
tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
\end
\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
\import [[$:/mwi/ui/PageTemplate/ContextMenu/Macros]]
<$vars
	tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
	tv-config-toolbar-text={{$:/config/Toolbar/Text}}
	tv-config-toolbar-class={{$:/config/Toolbar/ButtonClass}}
	tv-enable-drag-and-drop={{$:/config/DragAndDrop/Enable}}
	tv-show-missing-links={{$:/config/MissingLinks}}
	storyviewTitle={{$:/view}}
	languageTitle={{{ [{$:/language}get[name]] }}}>
	<div class=<<containerClasses>>>
		<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
			<$dropzone enable=<<tv-enable-drag-and-drop>>>
				<$messagecatcher $tm-navigate=<<additional-link-actions>> >
					<$eventcatcher $contextmenu={{{ [{$:/mwi/config/ContextMenuEnable}match[yes]then<contextmenu>else[]] }}} selector=".tc-tiddler-frame, [data-contextmenu]">
<div class="arsheth-cards">

						<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">
                        <$transclude tiddler=<<listItem>>/>
						</$list>
                        </div>
					</$eventcatcher>
				</$messagecatcher>
			</$dropzone>
		</$navigator>
	</div>
</$vars>

my custom pagetemplate code is given above.

#2

I can’t answer your direct question, but you do know that the sidebar tab “Open” features drag’n drop to reorder the tids in the river, right?

1 Like
#3

Thanks @twMat. I think this may help me. I will come back after reading the code used for sidebar open tiddler

#4

Hi @arunnbabu81

You might be interested in how I made the tiddlers draggable in the TiddlyFlex layout

3 Likes
#5 
\whitespace trim
\define containerClasses()
tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
\end

\define drop-actions()
<$action-listops $tiddler=<<tv-story-list>> $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
\end
\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
\import [[$:/mwi/ui/PageTemplate/ContextMenu/Macros]]
<$vars
	tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
	tv-config-toolbar-text={{$:/config/Toolbar/Text}}
	tv-config-toolbar-class={{$:/config/Toolbar/ButtonClass}}
	tv-enable-drag-and-drop={{$:/config/DragAndDrop/Enable}}
	tv-show-missing-links={{$:/config/MissingLinks}}
	storyviewTitle={{$:/view}}
	languageTitle={{{ [{$:/language}get[name]] }}}>
	<div class=<<containerClasses>>>
		<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
			<$dropzone enable=<<tv-enable-drag-and-drop>>>
				<$messagecatcher $tm-navigate=<<additional-link-actions>> >
					<$eventcatcher $contextmenu={{{ [{$:/mwi/config/ContextMenuEnable}match[yes]then<contextmenu>else[]] }}} selector=".tc-tiddler-frame, [data-contextmenu]">
<div class="arsheth-cards">

						<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">
<$droppable actions=<<drop-actions>>>
<$transclude tiddler=<<listItem>>/>
</$droppable>
						</$list>
                        </div>
					</$eventcatcher>
				</$messagecatcher>
			</$dropzone>
		</$navigator>
	</div>
</$vars>

I added drop-actions macro from sidebar open and droppable widget like this


						<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">
<$droppable actions=<<drop-actions>>>
<$transclude tiddler=<<listItem>>/>
</$droppable>
						</$list>

Now the tiddlers are draggable, but the dragged tiddler becomes the last tiddler in the storyriver, no matter where i drop it

#6

@BurningTreeC I will look into that as well