From 75447a8e7fd057c030ab5b862cc84bc7219e8cc8 Mon Sep 17 00:00:00 2001
From: Simon Huber <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 20:20:16 +0100
Subject: [PATCH 01/15] Add dragndrop procedures

This commit adds the basic dragndrop procedures for enhanced draggable lists
---
 core/wiki/macros/dragndrop.tid | 353 +++++++++++++++++++++++++++++++++
 1 file changed, 353 insertions(+)
 create mode 100644 core/wiki/macros/dragndrop.tid

diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
new file mode 100644
index 000000000..d7e2d2e11
--- /dev/null
+++ b/core/wiki/macros/dragndrop.tid
@@ -0,0 +1,353 @@
+title: $:/core/wiki/macros/dragndrop
+tags: $:/tags/Global
+
+\procedure draggable-droppable-bottom-drag-enter-actions()
+<$action-setfield
+	$tiddler=<<dragStateTiddler>>
+	drag-count={{{ [<dragStateTiddler>get[drag-count]add[1]] }}}
+	drag-enter-class=<<qualifiedDragEnterClass>>
+/>
+<%if [<dragStateTiddler>has[drag-enter-count]] %>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		target-before=""
+		target-after={{{ [list<list>after<tiddler>] }}}
+	/>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		start-next-tiddler=""
+		copy=""
+		target=<<tiddler>>
+		margin="bottom"
+		nth={{{ [list<list>allbefore<tiddler>count[]add[1]] }}}
+		next-tiddler=""
+		from-index={{{ [list<list>allbefore<tiddler>count[]add[1]] }}}
+		from-list=<<list>>
+		drag-enter-count={{{ [<dragStateTiddler>get[drag-enter-count]add[1]] }}}
+	/>
+<% else %>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		drag-enter-count="1"
+	/>
+<% endif %>
+\end
+
+\procedure draggable-droppable-top-drag-enter-actions()
+<$action-setfield
+	$tiddler=<<dragStateTiddler>>
+	drag-count={{{ [<dragStateTiddler>get[drag-count]add[1]] }}}
+	drag-enter-class=<<qualifiedDragEnterClass>>
+/>
+<%if [<dragStateTiddler>has[drag-enter-count]] %>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		target-before={{{ [list<list>before<tiddler>] }}}
+		target-after=""
+	/>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		start-next-tiddler=""
+		copy=""
+		target=<<tiddler>>
+		margin="top"
+		nth={{{ [list<list>allbefore<tiddler>count[]] }}}
+		next-tiddler=""
+		from-index={{{ [list<list>allbefore<tiddler>count[]] }}}
+		from-list=<<list>>
+		drag-enter-count={{{ [<dragStateTiddler>get[drag-enter-count]add[1]] }}}
+	/>
+<% else %>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		drag-enter-count="1"
+	/>
+<% endif %>
+\end
+
+\procedure draggable-droppable-bottom-drop-actions-inner()
+<$let
+	nextTiddler={{{ [list<list>after<tiddler>] }}}
+>
+	<%if [<nextTiddler>match[]] %>
+		<$action-listops
+			$tiddler=<<list>>
+			$subfilter="[<actionTiddler>]"
+		/>
+		<!-- here we could set the current-tiddler field of the history to the value of the actionTiddler -->
+	<% else %>
+		<%if [<actionTiddler>!match<nextTiddler>] %>
+			<$action-listops
+				$tiddler=<<list>>
+				$subfilter="+[insertbefore<actionTiddler>,<nextTiddler>]"
+			/>
+			<!-- here we could set the current-tiddler field of the history to the value of the actionTiddler -->
+		<% else %>
+			<$action-deletetiddler
+				$tiddler={{{ [<dragStateTiddler>addsuffix[/drag-handled]] }}}
+			/>
+			<$action-deletetiddler
+				$tiddler=<<dragStateTiddler>>
+			/>
+		<% endif %>
+	<% endif %>
+	<$action-deletetiddler
+		$tiddler=<<dragStateTiddler>>
+	/>
+	<<dropActions>>
+</$let>
+<!-- here we could set the current-tiddler field of the start-history to a different value -->
+\end
+
+\procedure draggable-droppable-bottom-drop-actions()
+<$action-setfield
+	$tiddler={{{ [<dragStateTiddler>addsuffix[/drag-handled]] }}}
+	text="yes"
+/>
+<%if [<actionTiddler>removeprefix<prefix>removesuffix<suffix>] %>
+	<$let
+		actionTiddler={{{ [<actionTiddler>removeprefix<prefix>removesuffix<suffix>] }}}
+	>
+		<$transclude
+			$variable="draggable-droppable-bottom-drop-actions-inner"
+		/>
+	</$let>
+<% else %>
+	<$transclude
+		$variable="draggable-droppable-bottom-drop-actions-inner"
+	/>
+<% endif %>
+<<dropActions>>
+\end
+
+\procedure draggable-droppable-top-drop-actions-inner()
+<%if [<actionTiddler>!match<tiddler>] %>
+	<$action-listops
+		$tiddler=<<list>>
+		$subfilter="+[insertbefore<actionTiddler>,<tiddler>]"
+	/>
+	<!-- here we could set the current-tiddler field of the history to the value of the actionTiddler -->
+<% else %>
+	<$action-deletetiddler
+		$tiddler={{{ [<dragStateTiddler>addsuffix[/drag-handled]] }}}
+	/>
+	<$action-deletetiddler
+		$tiddler=<<dragStateTiddler>>
+	/>
+<% endif %>
+<$action-deletetiddler
+	$tiddler=<<dragStateTiddler>>
+/>
+<!-- here we could set the current-tiddler field of the start-history to a different value -->
+\end
+
+\procedure draggable-droppable-top-drop-actions()
+<$action-setfield
+	$tiddler={{{ [<dragStateTiddler>addsuffix[/drag-handled]] }}}
+	text="yes"
+/>
+<%if [<actionTiddler>removeprefix<prefix>removesuffix<suffix>] %>
+	<$let
+		actionTiddler={{{ [<actionTiddler>removeprefix<prefix>removesuffix<suffix>] }}}
+	>
+		<$transclude
+			$variable="draggable-droppable-top-drop-actions-inner"
+		/>
+	</$let>
+<% else %>
+	<$transclude
+		$variable="draggable-droppable-top-drop-actions-inner"
+	/>
+<% endif %>
+\end
+
+\procedure draggable-droppable-drag-end-actions()
+<%if [<dragStateTiddler>addsuffix[/drag-handled]is[missing]] %>
+	<$let
+		fromList={{{ [<dragStateTiddler>get[start-from-list]] }}}
+		fromIndex={{{ [<dragStateTiddler>get[start-from-index]] }}}
+		listBeforeTiddler={{{ [list<fromList>zth<fromIndex>] }}}
+		actionTiddler={{{ [<actionTiddler>removeprefix<prefix>removesuffix<suffix>] :else[<actionTiddler>] }}}
+	>
+		<%if [<listBeforeTiddler>!is[blank]] %>
+			<$action-listops
+				$tiddler=<<fromStoryList>>
+				$subfilter="+[insertbefore<actionTiddler>,<listBeforeTiddler>]"
+			/>
+		<% else %>
+			<$action-listops
+				$tiddler=<<fromStoryList>>
+				$subfilter="[<actionTiddler>]"
+			/>
+		<% endif %>
+		<$action-deletetiddler
+			$tiddler={{{ [<dragStateTiddler>addsuffix[/drag-handled]] }}}
+		/>
+		<$action-deletetiddler
+			$tiddler=<<dragStateTiddler>>
+		/>
+	</$let>
+<% else %>
+	<$action-deletetiddler
+		$tiddler={{{ [<dragStateTiddler>addsuffix[/drag-handled]] }}}
+	/>
+<% endif %>
+\end
+
+\procedure draggable-droppable-drag-start-actions()
+<$let
+	nth={{{ [list<list>allbefore<tiddler>count[]] }}}
+	listLength={{{ [list<list>count[]subtract[1]] }}}
+>
+	<%if [<nth>match<listLength>] %>
+		<$action-setfield
+			$tiddler=<<dragStateTiddler>>
+			before-tiddler={{{ [list<list>before<tiddler>] }}}
+		/>
+	<% endif %>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		drag-count="0"
+		nth=<<nth>>
+		height=<<tv-selectednode-height>>
+		width=<<tv-selectednode-width>>
+		margin-bottom=<<styleMarginBottom>>
+		start-next-tiddler={{{ [list<list>after<tiddler>] }}}
+		start-from-index={{{ [list<list>allbefore<tiddler>count[]] }}}
+		start-from-list=<<list>>
+	/>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		drag-tiddler=<<tiddler>>
+		next-tiddler={{{ [list<list>after<tiddler>] }}}
+		from-index={{{ [list<list>allbefore<tiddler>count[]] }}}
+		from-list=<<list>>
+		from-history=<<history>>
+		target={{{ [list<list>after<tiddler>] }}}
+	/>
+	<$action-setfield
+		$tiddler=<<dragStateTiddler>>
+		tags="$:/tags/DragStateTiddler"
+		text="yes"
+	/>
+	<%if [<modifier>!match[ctrl]] %>
+		<$action-listops
+			$tiddler=<<list>>
+			$subfilter="-[<tiddler>]"
+		/>
+	<% else %>
+		<$action-setfield
+			$tiddler=<<dragStateTiddler>>
+			copy="yes"
+		/>
+	<% endif %>
+</$let>
+\end
+
+\function get.drag.state.tiddler.height() [<dragStateTiddler>get[height]addsuffix[px]]
+\function get.drag.state.tiddler.margin.bottom() [<dragStateTiddler>get[margin-bottom]]
+
+\function get.draggable.droppable.bottom.class() tc-draggable-droppable-drop-bottom [<dragStateTiddler>get[margin]match[bottom]then<qualifiedDragEnterClass>] :and[join[ ]]
+\function get.draggable.droppable.top.class() tc-draggable-droppable-drop-top [<dragStateTiddler>get[margin]match[top]then<qualifiedDragEnterClass>] :and[join[ ]]
+
+\function get.tiddler.before.target() [<dragStateTiddler>get[target]] :reduce[list<list>before<currentTiddler>]
+\function get.tiddler.after.target() [<dragStateTiddler>get[target]] :reduce[list<list>after<currentTiddler>]
+
+\function get.styleTransition()
+	[<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[none]]
+	:else[<dragStateTiddler>get[margin]match[top]then<get.tiddler.before.target>match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix[0ms linear]]
+	:else[<dragStateTiddler>get[margin]match[bottom]then<get.tiddler.after.target>match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
+	:else[<dragStateTiddler>get[margin]match[top]then<dragStateTiddler>get[target]match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
+	:else[<dragStateTiddler>get[margin]match[bottom]then<dragStateTiddler>get[target]match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix[0ms linear]]
+	:else[[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
+\end
+
+\function get.styleTop() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(-]addsuffix<get.drag.state.tiddler.height>addsuffix[ - (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) - 2px)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then[calc(-]addsuffix<get.drag.state.tiddler.height>addsuffix[ - (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) - 2px)]] :else[[calc( ]addsuffix[-]addsuffix<styleMarginTop>addsuffix[ - 2px)]]
+
+\function get.styleBottom() [[calc( ]addsuffix[-]addsuffix<styleMarginBottom>addsuffix[ - 2px)]]
+\function get.styleLeft() [[calc( ]addsuffix[-]addsuffix<stylePaddingLeft>addsuffix[ - 1px)]]
+
+\function get.styleTopHeight() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(50% + ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[ + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + 2px)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then[calc(50% + (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + 2px)]] :else[[calc(50% + ]addsuffix<styleMarginBottom>addsuffix[ + 2px)]]
+
+\function get.styleBottomHeight() [<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[bottom]then[calc(50% + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[ + 2px)]] :else[[calc(50% + 2px)]]
+
+\function get.styleWidth() [[calc(100% + ]addsuffix<stylePaddingLeft>addsuffix[ + ]addsuffix<stylePaddingRight>addsuffix[)]]
+
+\function get.styleMarginTop() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(]addsuffix<get.drag.state.tiddler.height>addsuffix[ + (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) + 2px)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then<dragStateTiddler>get[height]addsuffix[px]addprefix[calc(]addsuffix[ + (2 * ]addsuffix<styleMarginBottom>addsuffix[) + 2px)]] :else[[0px]]
+\function get.styleMarginBottom() [<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[bottom]then<dragStateTiddler>get[height]addsuffix[px]addprefix[calc(]addsuffix[ + (2 * ]addsuffix<styleMarginBottom>addsuffix[) + 2px)]] :else[[0px]]
+
+\function get.draggable.droppable.class() tc-draggable-droppable-qualifier [<qualifiedDragEnterClass>] :and[join[ ]]
+\function get.flexDirection() [<direction>match[vertical]then[row]] [<direction>match[horizontal]then[column]]
+
+\procedure make-draggable-droppable(tiddler:"",class:"",content:"",list:"",dropActions:"",history:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
+\whitespace trim
+<$tiddler tiddler=<<tiddler>>>
+<$let
+	prefix="[["
+	suffix="]]"
+	transclusion=<<tiddler>>
+	qualifiedDragEnterClass={{{ [<tiddler>addsuffix<qualfiy>sha256[64]] }}}
+>
+	<$draggable
+		enable=<<yes>>
+		tiddler=<<tiddler>>
+		startactions=<<draggable-droppable-drag-start-actions>>
+		endactions=<<draggable-droppable-drag-end-actions>>
+		class=<<class>>
+	>
+		<div
+			class=<<get.draggable.droppable.class>>
+			style.display="flex"
+			style.position="relative"
+			style.flex-direction=<<get.flexDirection>>
+			style.border="1px dashed gray"
+			style.margin-top=<<get.styleMarginTop>>
+			style.margin-bottom=<<get.styleMarginBottom>>
+			style.transition=<<get.styleTransition>>
+		>
+			<$set name="tv-enable-drag-and-drop" value="no">
+				<<content>> - <$text text=<<get.styleTransition>>/>
+			</$set>
+			<%if [<dragStateTiddler>get[text]match[yes]] %>
+				<%if [<direction>match[vertical]] %>
+					<$droppable
+						class=<<get.draggable.droppable.top.class>>
+						actions=<<draggable-droppable-top-drop-actions>>
+						dragenteractions=<<draggable-droppable-top-drag-enter-actions>>
+					>
+						<div
+							class="tc-draggable-droppable-drop-top-placeholder"
+							style.position="absolute"
+							style.border="1px solid black"
+							style.top=<<get.styleTop>>
+							style.left=<<get.styleLeft>>
+							style.height=<<get.styleTopHeight>>
+							style.width=<<get.styleWidth>>
+							style.z-index=<<styleZIndex>>
+						/>
+					</$droppable>
+					<$droppable
+						class=<<get.draggable.droppable.bottom.class>>
+						actions=<<draggable-droppable-bottom-drop-actions>>
+						dragenteractions=<<draggable-droppable-bottom-drag-enter-actions>>
+					>
+						<div
+							class="tc-draggable-droppable-drop-bottom-placeholder"
+							style.position="absolute"
+							style.border="1px solid red"
+							style.top="50%"
+							style.left=<<get.styleLeft>>
+							style.height=<<get.styleBottomHeight>>
+							style.width=<<get.styleWidth>>
+							style.z-index=<<styleZIndex>>
+						/>
+					</$droppable>
+				<%elseif [<direction>match[horizontal]] %>
+					<!-- horizontal handling missing at the moment -->
+				<% endif %>
+			<% endif %>
+		</div>
+	</$draggable>
+</$let>
+</$tiddler>
+\end

From fc0ea002c416e5c136af8eb33c3c2a1f6eb9bd7f Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 20:49:04 +0100
Subject: [PATCH 02/15] enhance droppable widget

---
 core/modules/widgets/droppable.js | 31 +++++++++++++++++++++++++++++--
 core/wiki/macros/dragndrop.tid    | 23 +++++++++++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/core/modules/widgets/droppable.js b/core/modules/widgets/droppable.js
index 72f1a67f7..4360554ce 100644
--- a/core/modules/widgets/droppable.js
+++ b/core/modules/widgets/droppable.js
@@ -50,7 +50,8 @@ DroppableWidget.prototype.render = function(parent,nextSibling) {
 			{name: "dragenter", handlerObject: this, handlerMethod: "handleDragEnterEvent"},
 			{name: "dragover", handlerObject: this, handlerMethod: "handleDragOverEvent"},
 			{name: "dragleave", handlerObject: this, handlerMethod: "handleDragLeaveEvent"},
-			{name: "drop", handlerObject: this, handlerMethod: "handleDropEvent"}
+			{name: "drop", handlerObject: this, handlerMethod: "handleDropEvent"},
+			{name: "dragend", handlerObject: this, handlerMethod: "handleDragLeaveEvent"}
 		]);
 	} else {
 		$tw.utils.addClass(this.domNode,this.disabledClass);
@@ -69,6 +70,11 @@ DroppableWidget.prototype.enterDrag = function(event) {
 	}
 	// If we're entering for the first time we need to apply highlighting
 	$tw.utils.addClass(this.domNodes[0],"tc-dragover");
+	// Invoke any enter actions
+	if(this.droppableEnterActions) {
+		var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
+		this.invokeActionString(this.droppableEnterActions,this,event,{modifier: modifierKey});
+	}
 };
 
 DroppableWidget.prototype.leaveDrag = function(event) {
@@ -82,6 +88,11 @@ DroppableWidget.prototype.leaveDrag = function(event) {
 		if(this.domNodes[0]) {
 			$tw.utils.removeClass(this.domNodes[0],"tc-dragover");
 		}
+		// Invoke any leave actions
+		if(this.droppableLeaveActions) {
+			var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
+			this.invokeActionString(this.droppableLeaveActions,this,event,{modifier: modifierKey});
+		}
 	}
 };
 
@@ -106,7 +117,20 @@ DroppableWidget.prototype.handleDragOverEvent  = function(event) {
 	return false;
 };
 
-DroppableWidget.prototype.handleDragLeaveEvent  = function(event) {
+DroppableWidget.prototype.handleDragEndEvent = function(event) {
+	if(this.domNodes[0]) {
+		$tw.utils.removeClass(this.domNodes[0],"tc-dragover");
+	}
+	this.currentlyEntered = [];
+	// Invoke any end actions
+	if(this.droppableEndActions) {
+		var modifierKey = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
+		this.invokeActionString(this.droppableEndActions,this,event,{modifier: modifierKey});
+	}
+	return false;
+};
+
+DroppableWidget.prototype.handleDragLeaveEvent = function(event) {
 	this.leaveDrag(event);
 	return false;
 };
@@ -166,6 +190,9 @@ Compute the internal state of the widget
 DroppableWidget.prototype.execute = function() {
 	this.droppableActions = this.getAttribute("actions");
 	this.droppableListActions = this.getAttribute("listActions");
+	this.droppableEnterActions = this.getAttribute("dragenteractions");
+	this.droppableLeaveActions = this.getAttribute("dragleaveactions");
+	this.droppableEndActions = this.getAttribute("dragendactions");
 	this.droppableEffect = this.getAttribute("effect","copy");
 	this.droppableTag = this.getAttribute("tag");
 	this.droppableEnable = (this.getAttribute("enable") || "yes") === "yes";
diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
index d7e2d2e11..87d68cfeb 100644
--- a/core/wiki/macros/dragndrop.tid
+++ b/core/wiki/macros/dragndrop.tid
@@ -351,3 +351,26 @@ tags: $:/tags/Global
 </$let>
 </$tiddler>
 \end
+
+\procedure draggable-droppable-list(content:"",list:"",dropActions:"",class:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",history:"",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
+<$list filter="[list<list>]" variable="tid">
+	<$transclude
+		$variable="make-draggable-droppable"
+		tiddler=<<tid>>
+		content=<<content>>
+		list=<<list>>
+		dropActions=<<dropActions>>
+		class=<<class>>
+		dragStateTiddler=<<dragStateTiddler>>
+		direction=<<direction>>
+		history=<<history>>
+		styleMarginTop=<<styleMarginTop>>
+		styleMarginBottom=<<styleMarginBottom>>
+		stylePaddingLeft=<<stylePaddingLeft>>
+		stylePaddingRight=<<stylePaddingRight>>
+		styleZIndex=<<styleZIndex>>
+		animationDuration=<<animationDuration>>
+		animationCurve=<<animationCurve>>
+	/>
+</$list>
+\end

From 5010def928e62a40a70d514c78ec6d40775c4a3e Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 20:52:56 +0100
Subject: [PATCH 03/15] remove superfluous pixel calculations

---
 core/wiki/macros/dragndrop.tid | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
index 87d68cfeb..afbd4a024 100644
--- a/core/wiki/macros/dragndrop.tid
+++ b/core/wiki/macros/dragndrop.tid
@@ -262,19 +262,19 @@ tags: $:/tags/Global
 	:else[[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
 \end
 
-\function get.styleTop() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(-]addsuffix<get.drag.state.tiddler.height>addsuffix[ - (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) - 2px)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then[calc(-]addsuffix<get.drag.state.tiddler.height>addsuffix[ - (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) - 2px)]] :else[[calc( ]addsuffix[-]addsuffix<styleMarginTop>addsuffix[ - 2px)]]
+\function get.styleTop() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(-]addsuffix<get.drag.state.tiddler.height>addsuffix[ - (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then[calc(-]addsuffix<get.drag.state.tiddler.height>addsuffix[ - (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[)]] :else[[calc( ]addsuffix[-]addsuffix<styleMarginTop>addsuffix[)]]
 
-\function get.styleBottom() [[calc( ]addsuffix[-]addsuffix<styleMarginBottom>addsuffix[ - 2px)]]
-\function get.styleLeft() [[calc( ]addsuffix[-]addsuffix<stylePaddingLeft>addsuffix[ - 1px)]]
+\function get.styleBottom() [[calc( ]addsuffix[-]addsuffix<styleMarginBottom>addsuffix[)]]
+\function get.styleLeft() [[calc( ]addsuffix[-]addsuffix<stylePaddingLeft>addsuffix[)]]
 
-\function get.styleTopHeight() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(50% + ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[ + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + 2px)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then[calc(50% + (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + 2px)]] :else[[calc(50% + ]addsuffix<styleMarginBottom>addsuffix[ + 2px)]]
+\function get.styleTopHeight() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(50% + ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[ + ]addsuffix<get.drag.state.tiddler.height>addsuffix[)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then[calc(50% + (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) + ]addsuffix<get.drag.state.tiddler.height>addsuffix[)]] :else[[calc(50% + ]addsuffix<styleMarginBottom>addsuffix[)]]
 
-\function get.styleBottomHeight() [<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[bottom]then[calc(50% + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[ + 2px)]] :else[[calc(50% + 2px)]]
+\function get.styleBottomHeight() [<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[bottom]then[calc(50% + ]addsuffix<get.drag.state.tiddler.height>addsuffix[ + ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[)]] :else[[50%]]
 
 \function get.styleWidth() [[calc(100% + ]addsuffix<stylePaddingLeft>addsuffix[ + ]addsuffix<stylePaddingRight>addsuffix[)]]
 
-\function get.styleMarginTop() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(]addsuffix<get.drag.state.tiddler.height>addsuffix[ + (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[) + 2px)]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then<dragStateTiddler>get[height]addsuffix[px]addprefix[calc(]addsuffix[ + (2 * ]addsuffix<styleMarginBottom>addsuffix[) + 2px)]] :else[[0px]]
-\function get.styleMarginBottom() [<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[bottom]then<dragStateTiddler>get[height]addsuffix[px]addprefix[calc(]addsuffix[ + (2 * ]addsuffix<styleMarginBottom>addsuffix[) + 2px)]] :else[[0px]]
+\function get.styleMarginTop() [<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[calc(]addsuffix<get.drag.state.tiddler.height>addsuffix[ + (2 * ]addsuffix<get.drag.state.tiddler.margin.bottom>addsuffix[))]] :else[<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[top]then<dragStateTiddler>get[height]addsuffix[px]addprefix[calc(]addsuffix[ + (2 * ]addsuffix<styleMarginBottom>addsuffix[))]] :else[[0px]]
+\function get.styleMarginBottom() [<dragStateTiddler>get[drag-enter-class]match<qualifiedDragEnterClass>then<dragStateTiddler>get[margin]match[bottom]then<dragStateTiddler>get[height]addsuffix[px]addprefix[calc(]addsuffix[ + (2 * ]addsuffix<styleMarginBottom>addsuffix[))]] :else[[0px]]
 
 \function get.draggable.droppable.class() tc-draggable-droppable-qualifier [<qualifiedDragEnterClass>] :and[join[ ]]
 \function get.flexDirection() [<direction>match[vertical]then[row]] [<direction>match[horizontal]then[column]]
@@ -300,7 +300,7 @@ tags: $:/tags/Global
 			style.display="flex"
 			style.position="relative"
 			style.flex-direction=<<get.flexDirection>>
-			style.border="1px dashed gray"
+			style.border="none"
 			style.margin-top=<<get.styleMarginTop>>
 			style.margin-bottom=<<get.styleMarginBottom>>
 			style.transition=<<get.styleTransition>>
@@ -318,7 +318,7 @@ tags: $:/tags/Global
 						<div
 							class="tc-draggable-droppable-drop-top-placeholder"
 							style.position="absolute"
-							style.border="1px solid black"
+							style.border="none"
 							style.top=<<get.styleTop>>
 							style.left=<<get.styleLeft>>
 							style.height=<<get.styleTopHeight>>
@@ -334,7 +334,7 @@ tags: $:/tags/Global
 						<div
 							class="tc-draggable-droppable-drop-bottom-placeholder"
 							style.position="absolute"
-							style.border="1px solid red"
+							style.border="none"
 							style.top="50%"
 							style.left=<<get.styleLeft>>
 							style.height=<<get.styleBottomHeight>>

From 26235c422fa63a2a930a00cbd4b8a7d174ad7ef0 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 20:55:19 +0100
Subject: [PATCH 04/15] remove some debugging

---
 core/wiki/macros/dragndrop.tid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
index afbd4a024..f7d567901 100644
--- a/core/wiki/macros/dragndrop.tid
+++ b/core/wiki/macros/dragndrop.tid
@@ -306,7 +306,7 @@ tags: $:/tags/Global
 			style.transition=<<get.styleTransition>>
 		>
 			<$set name="tv-enable-drag-and-drop" value="no">
-				<<content>> - <$text text=<<get.styleTransition>>/>
+				<<content>>
 			</$set>
 			<%if [<dragStateTiddler>get[text]match[yes]] %>
 				<%if [<direction>match[vertical]] %>

From 4c84ac0f3f4ea68d66e244857c5b95c4f67ccb5b Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 21:13:38 +0100
Subject: [PATCH 05/15] not sure about the transitions yet

---
 core/wiki/macros/dragndrop.tid | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
index f7d567901..a718f5318 100644
--- a/core/wiki/macros/dragndrop.tid
+++ b/core/wiki/macros/dragndrop.tid
@@ -255,7 +255,9 @@ tags: $:/tags/Global
 
 \function get.styleTransition()
 	[<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[none]]
-	:else[<dragStateTiddler>get[margin]match[top]then<get.tiddler.before.target>match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix[0ms linear]]
+	:else[<dragStateTiddler>get[margin]match[top]then<get.tiddler.before.target>match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom 0ms linear]]
+	:else[<dragStateTiddler>get[margin]match[top]then<get.tiddler.after.target>match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
+	:else[<dragStateTiddler>get[margin]match[bottom]then<get.tiddler.before.target>match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom 0ms linear]]
 	:else[<dragStateTiddler>get[margin]match[bottom]then<get.tiddler.after.target>match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
 	:else[<dragStateTiddler>get[margin]match[top]then<dragStateTiddler>get[target]match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
 	:else[<dragStateTiddler>get[margin]match[bottom]then<dragStateTiddler>get[target]match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix[0ms linear]]

From 9ad3defeebdd9f94627bc5105150785e32a2844a Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 21:27:04 +0100
Subject: [PATCH 06/15] make use of in SideBar/Open tab

---
 core/ui/SideBar/Open.tid | 29 +++++++----------------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/core/ui/SideBar/Open.tid b/core/ui/SideBar/Open.tid
index d3e528148..2d07eb0b9 100644
--- a/core/ui/SideBar/Open.tid
+++ b/core/ui/SideBar/Open.tid
@@ -5,33 +5,18 @@ caption: {{$:/language/SideBar/Open/Caption}}
 \whitespace trim
 \define lingo-base() $:/language/CloseAll/
 
-\define drop-actions()
-<$action-listops $tiddler=<<tv-story-list>> $subfilter="+[insertbefore<actionTiddler>,<currentTiddler>]"/>
-\end
-
-\define placeholder()
-<div class="tc-droppable-placeholder"/>
-\end
-
-\define droppable-item(button)
 \whitespace trim
-<$droppable actions=<<drop-actions>> enable=<<tv-allow-drag-and-drop>> tag="div">
-<<placeholder>>
-<div>
-$button$
+\define lingo-base() $:/language/CloseAll/
+
+\define content()
+<div class="tc-sidebar-tab-open-item">
+<$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 draggable="no"/>
 </div>
-</$droppable>
 \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">
-<$macrocall $name="droppable-item" button="<$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/>"/>
-</div>
+<$transclude $variable="make-draggable-droppable" tiddler=<<currentTiddler>> list=<<tv-story-list>> content=<<content>> animationDuration="200"/>
 </$list>
-<$tiddler tiddler="">
-<div>
-<$macrocall $name="droppable-item" button="<$button message='tm-close-all-tiddlers' class='tc-btn-invisible tc-btn-mini'><<lingo Button>></$button>"/>
-</div>
-</$tiddler>
 </div>
+<$button message='tm-close-all-tiddlers' class='tc-btn-invisible tc-btn-mini'><<lingo Button>></$button>

From 770a5d45ac78d8ebb73bab75bcdaf8ac6b703a67 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Thu, 18 Dec 2025 21:41:33 +0100
Subject: [PATCH 07/15] add changenote

---
 .../releasenotes/5.4.0/#9507 - dragndrop.tid      | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 editions/tw5.com/tiddlers/releasenotes/5.4.0/#9507 - dragndrop.tid

diff --git a/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9507 - dragndrop.tid b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9507 - dragndrop.tid
new file mode 100644
index 000000000..feb447a32
--- /dev/null
+++ b/editions/tw5.com/tiddlers/releasenotes/5.4.0/#9507 - dragndrop.tid	
@@ -0,0 +1,15 @@
+title: $:/changenotes/5.4.0/#9507
+created: 20251218204100502
+modified: 20251218204100502
+tags: $:/tags/ChangeNote
+change-type: enhancement
+change-category: usability
+description: Dragndrop procedures for enhanced dragndrop lists
+release: 5.4.0
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9507
+github-contributors: BurningTreeC
+type: text/vnd.tiddlywiki
+
+This pull request extends Tiddlywiki with advanced drag-and-drop procedures.
+
+Lists can be expanded using drag-and-drop, and the drag-and-drop experience feels more natural.

From 1c33fa9de6e835e8f7558be746ed1adf0d5f9de5 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Fri, 19 Dec 2025 05:24:38 +0100
Subject: [PATCH 08/15] make story-river draggable-droppable (alt-D to
 activate)

---
 core/language/en-GB/Buttons.multids            |  1 +
 core/ui/KeyboardShortcuts/toggle-dragndrop.tid |  9 +++++++++
 core/ui/PageTemplate/story.tid                 | 11 ++++++++++-
 core/wiki/config/DragnDrop.tid                 |  3 +++
 core/wiki/config/ShortcutInfo.multids          |  1 +
 core/wiki/config/shortcuts/shortcuts.multids   |  1 +
 core/wiki/macros/dragndrop.tid                 | 15 +++++----------
 7 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 core/ui/KeyboardShortcuts/toggle-dragndrop.tid
 create mode 100644 core/wiki/config/DragnDrop.tid

diff --git a/core/language/en-GB/Buttons.multids b/core/language/en-GB/Buttons.multids
index 2fa732fd9..0c79d20d7 100644
--- a/core/language/en-GB/Buttons.multids
+++ b/core/language/en-GB/Buttons.multids
@@ -193,6 +193,7 @@ Subscript/Caption: subscript
 Subscript/Hint: Apply subscript formatting to selection
 Superscript/Caption: superscript
 Superscript/Hint: Apply superscript formatting to selection
+ToggleDragnDrop/Hint: Toggle drag-and-drop of the tiddlers in the story river
 ToggleSidebar/Hint: Toggle the sidebar visibility
 Transcludify/Caption: transclusion
 Transcludify/Hint: Wrap selection in curly brackets
diff --git a/core/ui/KeyboardShortcuts/toggle-dragndrop.tid b/core/ui/KeyboardShortcuts/toggle-dragndrop.tid
new file mode 100644
index 000000000..a53290044
--- /dev/null
+++ b/core/ui/KeyboardShortcuts/toggle-dragndrop.tid
@@ -0,0 +1,9 @@
+title: $:/core/ui/KeyboardShortcuts/toggle-dragndrop
+tags: $:/tags/KeyboardShortcut
+key: ((toggle-dragndrop))
+
+<%if [{$:/config/story/dragndrop/enable}match[no]] %>
+    <$action-setfield $tiddler="$:/config/story/dragndrop/enable" text="yes"/>
+<% else %>
+    <$action-setfield $tiddler="$:/config/story/dragndrop/enable" text="no"/>
+<% endif %>
diff --git a/core/ui/PageTemplate/story.tid b/core/ui/PageTemplate/story.tid
index 38e723835..7f95863c0 100644
--- a/core/ui/PageTemplate/story.tid
+++ b/core/ui/PageTemplate/story.tid
@@ -1,6 +1,11 @@
 title: $:/core/ui/PageTemplate/story
 tags: $:/tags/PageTemplate
 
+\procedure content()
+\whitespace trim
+{{||$:/core/ui/StoryTiddlerTemplate}}
+\end
+
 \whitespace trim
 <section class="tc-story-river" role="main">
 
@@ -14,7 +19,11 @@ tags: $:/tags/PageTemplate
 
 </section>
 
-<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" template="$:/core/ui/StoryTiddlerTemplate" storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}/>
+<$list filter="[list[$:/StoryList]]" history="$:/HistoryList" storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}>
+
+<$transclude $variable="make-draggable-droppable" tiddler=<<currentTiddler>> enable={{$:/config/story/dragndrop/enable}} list="$:/StoryList" content=<<content>>/>
+
+</$list>
 
 <section class="story-frontdrop">
 
diff --git a/core/wiki/config/DragnDrop.tid b/core/wiki/config/DragnDrop.tid
new file mode 100644
index 000000000..e9fb69082
--- /dev/null
+++ b/core/wiki/config/DragnDrop.tid
@@ -0,0 +1,3 @@
+title: $:/config/story/dragndrop/enable
+
+no
\ No newline at end of file
diff --git a/core/wiki/config/ShortcutInfo.multids b/core/wiki/config/ShortcutInfo.multids
index b2c843f35..0d0323bb3 100644
--- a/core/wiki/config/ShortcutInfo.multids
+++ b/core/wiki/config/ShortcutInfo.multids
@@ -44,6 +44,7 @@ stamp: {{$:/language/Buttons/Stamp/Hint}}
 strikethrough: {{$:/language/Buttons/Strikethrough/Hint}}
 subscript: {{$:/language/Buttons/Subscript/Hint}}
 superscript: {{$:/language/Buttons/Superscript/Hint}}
+toggle-dragndrop: {{$:/language/Buttons/ToggleDragnDrop/Hint}}
 toggle-sidebar: {{$:/language/Buttons/ToggleSidebar/Hint}}
 transcludify: {{$:/language/Buttons/Transcludify/Hint}}
 underline: {{$:/language/Buttons/Underline/Hint}}
diff --git a/core/wiki/config/shortcuts/shortcuts.multids b/core/wiki/config/shortcuts/shortcuts.multids
index 470988a9a..9a6c1fbd7 100644
--- a/core/wiki/config/shortcuts/shortcuts.multids
+++ b/core/wiki/config/shortcuts/shortcuts.multids
@@ -38,5 +38,6 @@ stamp: ctrl-S
 strikethrough: ctrl-T
 subscript: ctrl-shift-B
 superscript: ctrl-shift-P
+toggle-dragndrop: alt-D
 toggle-sidebar: alt-shift-S
 transcludify: alt-shift-T
diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
index a718f5318..2feba6dc6 100644
--- a/core/wiki/macros/dragndrop.tid
+++ b/core/wiki/macros/dragndrop.tid
@@ -255,12 +255,6 @@ tags: $:/tags/Global
 
 \function get.styleTransition()
 	[<dragStateTiddler>get[start-next-tiddler]match<tiddler>then[none]]
-	:else[<dragStateTiddler>get[margin]match[top]then<get.tiddler.before.target>match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom 0ms linear]]
-	:else[<dragStateTiddler>get[margin]match[top]then<get.tiddler.after.target>match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
-	:else[<dragStateTiddler>get[margin]match[bottom]then<get.tiddler.before.target>match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom 0ms linear]]
-	:else[<dragStateTiddler>get[margin]match[bottom]then<get.tiddler.after.target>match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
-	:else[<dragStateTiddler>get[margin]match[top]then<dragStateTiddler>get[target]match<tiddler>then[margin-top 0ms linear, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
-	:else[<dragStateTiddler>get[margin]match[bottom]then<dragStateTiddler>get[target]match<tiddler>then[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix[0ms linear]]
 	:else[[margin-top ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>addsuffix[, margin-bottom ]addsuffix<animationDuration>addsuffix[ms ]addsuffix<animationCurve>]
 \end
 
@@ -281,7 +275,7 @@ tags: $:/tags/Global
 \function get.draggable.droppable.class() tc-draggable-droppable-qualifier [<qualifiedDragEnterClass>] :and[join[ ]]
 \function get.flexDirection() [<direction>match[vertical]then[row]] [<direction>match[horizontal]then[column]]
 
-\procedure make-draggable-droppable(tiddler:"",class:"",content:"",list:"",dropActions:"",history:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
+\procedure make-draggable-droppable(tiddler:"",class:"",content:"",list:"",enable:"yes",dropActions:"",history:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
 \whitespace trim
 <$tiddler tiddler=<<tiddler>>>
 <$let
@@ -291,7 +285,7 @@ tags: $:/tags/Global
 	qualifiedDragEnterClass={{{ [<tiddler>addsuffix<qualfiy>sha256[64]] }}}
 >
 	<$draggable
-		enable=<<yes>>
+		enable=<<enable>>
 		tiddler=<<tiddler>>
 		startactions=<<draggable-droppable-drag-start-actions>>
 		endactions=<<draggable-droppable-drag-end-actions>>
@@ -307,7 +301,7 @@ tags: $:/tags/Global
 			style.margin-bottom=<<get.styleMarginBottom>>
 			style.transition=<<get.styleTransition>>
 		>
-			<$set name="tv-enable-drag-and-drop" value="no">
+			<$set name="tv-enable-drag-and-drop" value={{{ [<enable>match[yes]then[no]] :else[<tv-enable-drag-and-drop>] }}}>
 				<<content>>
 			</$set>
 			<%if [<dragStateTiddler>get[text]match[yes]] %>
@@ -354,13 +348,14 @@ tags: $:/tags/Global
 </$tiddler>
 \end
 
-\procedure draggable-droppable-list(content:"",list:"",dropActions:"",class:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",history:"",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
+\procedure draggable-droppable-list(content:"",list:"",enable:"yes",dropActions:"",class:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",history:"",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
 <$list filter="[list<list>]" variable="tid">
 	<$transclude
 		$variable="make-draggable-droppable"
 		tiddler=<<tid>>
 		content=<<content>>
 		list=<<list>>
+		enable=<<enable>>
 		dropActions=<<dropActions>>
 		class=<<class>>
 		dragStateTiddler=<<dragStateTiddler>>

From 2ec8f009acfa0c6f0ca183181079ebaac8d3bb86 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Fri, 19 Dec 2025 05:49:07 +0100
Subject: [PATCH 09/15] add margins and padding -> waiting for mediaquery
 tracking

---
 core/ui/PageTemplate/story.tid | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/ui/PageTemplate/story.tid b/core/ui/PageTemplate/story.tid
index 7f95863c0..4ff124dbe 100644
--- a/core/ui/PageTemplate/story.tid
+++ b/core/ui/PageTemplate/story.tid
@@ -21,7 +21,7 @@ tags: $:/tags/PageTemplate
 
 <$list filter="[list[$:/StoryList]]" history="$:/HistoryList" storyview={{$:/view}} emptyMessage={{$:/config/EmptyStoryMessage}}>
 
-<$transclude $variable="make-draggable-droppable" tiddler=<<currentTiddler>> enable={{$:/config/story/dragndrop/enable}} list="$:/StoryList" content=<<content>>/>
+<$transclude $variable="make-draggable-droppable" tiddler=<<currentTiddler>> enable={{$:/config/story/dragndrop/enable}} list="$:/StoryList" content=<<content>> styleMarginBottom="28px" stylePaddingLeft="42px" stylePaddingRight="42px"/>
 
 </$list>
 

From 9e16391c5283096ab0863ef2f78757bb9f4e0cca Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 20 Dec 2025 12:53:13 +0100
Subject: [PATCH 10/15] remove draggable-droppable-list procedure

---
 core/wiki/macros/dragndrop.tid | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/core/wiki/macros/dragndrop.tid b/core/wiki/macros/dragndrop.tid
index 2feba6dc6..e3afc3a4f 100644
--- a/core/wiki/macros/dragndrop.tid
+++ b/core/wiki/macros/dragndrop.tid
@@ -347,27 +347,3 @@ tags: $:/tags/Global
 </$let>
 </$tiddler>
 \end
-
-\procedure draggable-droppable-list(content:"",list:"",enable:"yes",dropActions:"",class:"",dragStateTiddler:"$:/state/tiddlywiki/dragging",direction:"vertical",history:"",styleMarginTop:"0px",styleMarginBottom:"0px",stylePaddingLeft:"0px",stylePaddingRight:"0px",styleZIndex:"501",animationDuration:"175",animationCurve:"linear")
-<$list filter="[list<list>]" variable="tid">
-	<$transclude
-		$variable="make-draggable-droppable"
-		tiddler=<<tid>>
-		content=<<content>>
-		list=<<list>>
-		enable=<<enable>>
-		dropActions=<<dropActions>>
-		class=<<class>>
-		dragStateTiddler=<<dragStateTiddler>>
-		direction=<<direction>>
-		history=<<history>>
-		styleMarginTop=<<styleMarginTop>>
-		styleMarginBottom=<<styleMarginBottom>>
-		stylePaddingLeft=<<stylePaddingLeft>>
-		stylePaddingRight=<<stylePaddingRight>>
-		styleZIndex=<<styleZIndex>>
-		animationDuration=<<animationDuration>>
-		animationCurve=<<animationCurve>>
-	/>
-</$list>
-\end

From ee39ab0517e80725622c534be4ad605bd0481d1a Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 20 Dec 2025 13:11:00 +0100
Subject: [PATCH 11/15] enhance draggable widget with
 dragStartListenerReference and dragEndListenerReference

---
 core/modules/utils/dom/dragndrop.js | 219 ++++++++++++++--------------
 core/modules/widgets/draggable.js   |  21 ++-
 2 files changed, 132 insertions(+), 108 deletions(-)

diff --git a/core/modules/utils/dom/dragndrop.js b/core/modules/utils/dom/dragndrop.js
index 25a13537c..4ad745ee1 100644
--- a/core/modules/utils/dom/dragndrop.js
+++ b/core/modules/utils/dom/dragndrop.js
@@ -22,127 +22,134 @@ widget: widget to use as the context for the filter
 exports.makeDraggable = function(options) {
 	var dragImageType = options.dragImageType || "dom",
 		dragImage,
-		domNode = options.domNode;
+		domNode = options.domNode,
+		removeEventHandler = options.remove;
 	// Make the dom node draggable (not necessary for anchor tags)
 	if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
 		domNode.setAttribute("draggable","true");
 	}
-	// Add event handlers
-	$tw.utils.addEventListeners(domNode,[
-		{name: "dragstart", handlerFunction: function(event) {
-			if(event.dataTransfer === undefined) {
-				return false;
+	var dragStartHandlerFunction = function(event) {
+		if(event.dataTransfer === undefined) {
+			return false;
+		}
+		// Collect the tiddlers being dragged
+		var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
+			dragFilter = options.dragFilterFn && options.dragFilterFn(),
+			titles = dragTiddler ? [dragTiddler] : [],
+			startActions = options.startActions,
+			variables,
+			domNodeRect;
+		if(dragFilter) {
+			titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
+		}
+		var titleString = $tw.utils.stringifyList(titles);
+		// Check that we've something to drag
+		if(titles.length > 0 && (options.selector && $tw.utils.domMatchesSelector(event.target,options.selector) || event.target === domNode)) {
+			// Mark the drag in progress
+			$tw.dragInProgress = domNode;
+			// Set the dragging class on the element being dragged
+			$tw.utils.addClass(domNode,"tc-dragging");
+			// Invoke drag-start actions if given
+			if(startActions !== undefined) {
+				// Collect our variables
+				variables = $tw.utils.collectDOMVariables(domNode,null,event);
+				variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
+				variables["actionTiddler"] = titleString;
+				options.widget.invokeActionString(startActions,options.widget,event,variables);
 			}
+			// Create the drag image elements
+			dragImage = options.widget.document.createElement("div");
+			dragImage.className = "tc-tiddler-dragger";
+			var inner = options.widget.document.createElement("div");
+			inner.className = "tc-tiddler-dragger-inner";
+			inner.appendChild(options.widget.document.createTextNode(
+				titles.length === 1 ? 
+					titles[0] :
+					titles.length + " tiddlers"
+			));
+			dragImage.appendChild(inner);
+			options.widget.document.body.appendChild(dragImage);
+			// Set the data transfer properties
+			var dataTransfer = event.dataTransfer;
+			// Set up the image
+			dataTransfer.effectAllowed = "all";
+			if(dataTransfer.setDragImage) {
+				if(dragImageType === "pill") {
+					dataTransfer.setDragImage(dragImage.firstChild,-16,-16);
+				} else if(dragImageType === "blank") {
+					dragImage.removeChild(dragImage.firstChild);
+					dataTransfer.setDragImage(dragImage,0,0);
+				} else {
+					var r = domNode.getBoundingClientRect();
+					dataTransfer.setDragImage(domNode,event.clientX-r.left,event.clientY-r.top);
+				}
+			}
+			// Set up the data transfer
+			if(dataTransfer.clearData) {
+				dataTransfer.clearData();
+			}
+			var jsonData = [];
+			if(titles.length > 1) {
+				titles.forEach(function(title) {
+					jsonData.push(options.widget.wiki.getTiddlerAsJson(title));
+				});
+				jsonData = "[" + jsonData.join(",") + "]";
+			} else {
+				jsonData = options.widget.wiki.getTiddlerAsJson(titles[0]);
+			}
+			// IE doesn't like these content types
+			if(!$tw.browser.isIE) {
+				dataTransfer.setData("text/vnd.tiddler",jsonData);
+				dataTransfer.setData("text/plain",titleString);
+				dataTransfer.setData("text/x-moz-url","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
+			}
+			// If browser is Chrome-like and has a touch-input device do NOT .setData
+			if(!($tw.browser.isMobileChrome)) {
+				dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
+			}
+			dataTransfer.setData("Text",titleString);
+			event.stopPropagation();
+		}
+		return false;
+	};
+
+	var dragEndHandlerFunction = function(event) {
+		if((options.selector && $tw.utils.domMatchesSelector(event.target,options.selector)) || event.target === domNode) {
 			// Collect the tiddlers being dragged
 			var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
 				dragFilter = options.dragFilterFn && options.dragFilterFn(),
 				titles = dragTiddler ? [dragTiddler] : [],
-				startActions = options.startActions,
-				variables,
-				domNodeRect;
+				endActions = options.endActions,
+				variables;
 			if(dragFilter) {
 				titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
 			}
 			var titleString = $tw.utils.stringifyList(titles);
-			// Check that we've something to drag
-			if(titles.length > 0 && (options.selector && $tw.utils.domMatchesSelector(event.target,options.selector) || event.target === domNode)) {
-				// Mark the drag in progress
-				$tw.dragInProgress = domNode;
-				// Set the dragging class on the element being dragged
-				$tw.utils.addClass(domNode,"tc-dragging");
-				// Invoke drag-start actions if given
-				if(startActions !== undefined) {
-					// Collect our variables
-					variables = $tw.utils.collectDOMVariables(domNode,null,event);
-					variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
-					variables["actionTiddler"] = titleString;
-					options.widget.invokeActionString(startActions,options.widget,event,variables);
-				}
-				// Create the drag image elements
-				dragImage = options.widget.document.createElement("div");
-				dragImage.className = "tc-tiddler-dragger";
-				var inner = options.widget.document.createElement("div");
-				inner.className = "tc-tiddler-dragger-inner";
-				inner.appendChild(options.widget.document.createTextNode(
-					titles.length === 1 ? 
-						titles[0] :
-						titles.length + " tiddlers"
-				));
-				dragImage.appendChild(inner);
-				options.widget.document.body.appendChild(dragImage);
-				// Set the data transfer properties
-				var dataTransfer = event.dataTransfer;
-				// Set up the image
-				dataTransfer.effectAllowed = "all";
-				if(dataTransfer.setDragImage) {
-					if(dragImageType === "pill") {
-						dataTransfer.setDragImage(dragImage.firstChild,-16,-16);
-					} else if(dragImageType === "blank") {
-						dragImage.removeChild(dragImage.firstChild);
-						dataTransfer.setDragImage(dragImage,0,0);
-					} else {
-						var r = domNode.getBoundingClientRect();
-						dataTransfer.setDragImage(domNode,event.clientX-r.left,event.clientY-r.top);
-					}
-				}
-				// Set up the data transfer
-				if(dataTransfer.clearData) {
-					dataTransfer.clearData();
-				}
-				var jsonData = [];
-				if(titles.length > 1) {
-					titles.forEach(function(title) {
-						jsonData.push(options.widget.wiki.getTiddlerAsJson(title));
-					});
-					jsonData = "[" + jsonData.join(",") + "]";
-				} else {
-					jsonData = options.widget.wiki.getTiddlerAsJson(titles[0]);
-				}
-				// IE doesn't like these content types
-				if(!$tw.browser.isIE) {
-					dataTransfer.setData("text/vnd.tiddler",jsonData);
-					dataTransfer.setData("text/plain",titleString);
-					dataTransfer.setData("text/x-moz-url","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
-				}
-				// If browser is Chrome-like and has a touch-input device do NOT .setData
-				if(!($tw.browser.isMobileChrome)) {
-					dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
-				}
-				dataTransfer.setData("Text",titleString);
-				event.stopPropagation();
+			$tw.dragInProgress = null;
+			// Invoke drag-end actions if given
+			if(endActions !== undefined) {
+				variables = $tw.utils.collectDOMVariables(domNode,null,event);
+				variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
+				variables["actionTiddler"] = titleString;
+				options.widget.invokeActionString(endActions,options.widget,event,variables);
 			}
-			return false;
-		}},
-		{name: "dragend", handlerFunction: function(event) {
-			if((options.selector && $tw.utils.domMatchesSelector(event.target,options.selector)) || event.target === domNode) {
-				// Collect the tiddlers being dragged
-				var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
-					dragFilter = options.dragFilterFn && options.dragFilterFn(),
-					titles = dragTiddler ? [dragTiddler] : [],
-					endActions = options.endActions,
-					variables;
-				if(dragFilter) {
-					titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
-				}
-				var titleString = $tw.utils.stringifyList(titles);
-				$tw.dragInProgress = null;
-				// Invoke drag-end actions if given
-				if(endActions !== undefined) {
-					variables = $tw.utils.collectDOMVariables(domNode,null,event);
-					variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
-					variables["actionTiddler"] = titleString;
-					options.widget.invokeActionString(endActions,options.widget,event,variables);
-				}
-				// Remove the dragging class on the element being dragged
-				$tw.utils.removeClass(domNode,"tc-dragging");
-				// Delete the drag image element
-				if(dragImage) {
-					dragImage.parentNode.removeChild(dragImage);
-					dragImage = null;
-				}
+			// Remove the dragging class on the element being dragged
+			$tw.utils.removeClass(domNode,"tc-dragging");
+			// Delete the drag image element
+			if(dragImage) {
+				dragImage.parentNode.removeChild(dragImage);
+				dragImage = null;
 			}
-			return false;
-		}}
+		}
+		return false;
+	};
+
+	// Add event handlers
+	options.widget.dragStartListenerReference = dragStartHandlerFunction;
+	options.widget.dragEndListenerReference = dragEndHandlerFunction;
+	$tw.utils.addEventListeners(domNode,[
+		{name: "dragstart", handlerFunction: dragStartHandlerFunction},
+		{name: "dragend", handlerFunction: dragEndHandlerFunction}
 	]);
 };
 
diff --git a/core/modules/widgets/draggable.js b/core/modules/widgets/draggable.js
index 0bb2fc169..6d76d2075 100644
--- a/core/modules/widgets/draggable.js
+++ b/core/modules/widgets/draggable.js
@@ -57,10 +57,17 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 	// Insert the node into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
+	this.makeDraggable(domNode);
+	this.domNodes.push(domNode);
+};
+
+DraggableWidget.prototype.makeDraggable = function(domNode) {
+	var self = this;
 	// Add event handlers
 	if(this.dragEnable) {
 		$tw.utils.makeDraggable({
 			domNode: domNode,
+			remove: false,
 			dragTiddlerFn: function() {return self.getAttribute("tiddler");},
 			dragFilterFn: function() {return self.getAttribute("filter");},
 			startActions: self.startActions,
@@ -69,8 +76,11 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 			widget: this,
 			selector: self.dragHandleSelector
 		});
+	} else if(this.dragStartListenerReference && this.dragEndListenerReference) {
+		domNode.removeEventListener("dragstart",this.dragStartListenerReference,false);
+		domNode.removeEventListener("dragend",this.dragEndListenerReference,false);
+		domNode.removeAttribute("draggable");
 	}
-	this.domNodes.push(domNode);
 };
 
 /*
@@ -111,10 +121,17 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 DraggableWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.tag || changedAttributes.selector || changedAttributes.dragimagetype || changedAttributes.enable || changedAttributes.startactions || changedAttributes.endactions) {
+	if(changedAttributes.tag || changedAttributes.selector || changedAttributes.dragimagetype || changedAttributes.startactions || changedAttributes.endactions) {
 		this.refreshSelf();
 		return true;
 	} else {
+		this.dragEnable = this.getAttribute("enable","yes") === "yes";
+		this.makeDraggable(this.domNodes[0]);
+		if(!this.dragHandleSelector && this.dragEnable && !this.domNodes[0].classList.contains("tc-draggable")) {
+			this.domNodes[0].classList.add("tc-draggable");
+		} else if(!this.dragHandleSelector && !this.dragEnable && this.domNodes[0].classList.contains("tc-draggable")) {
+			this.domNodes[0].classList.remove("tc-draggable");
+		}
 		if(changedAttributes["class"]) {
 			this.updateDomNodeClasses();
 		}

From 5b90b72936a2fed3d3a76db1b228b70a63c17684 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 20 Dec 2025 13:16:08 +0100
Subject: [PATCH 12/15] remove unused variables

---
 core/modules/utils/dom/dragndrop.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/core/modules/utils/dom/dragndrop.js b/core/modules/utils/dom/dragndrop.js
index 4ad745ee1..944633d2e 100644
--- a/core/modules/utils/dom/dragndrop.js
+++ b/core/modules/utils/dom/dragndrop.js
@@ -22,8 +22,7 @@ widget: widget to use as the context for the filter
 exports.makeDraggable = function(options) {
 	var dragImageType = options.dragImageType || "dom",
 		dragImage,
-		domNode = options.domNode,
-		removeEventHandler = options.remove;
+		domNode = options.domNode;
 	// Make the dom node draggable (not necessary for anchor tags)
 	if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
 		domNode.setAttribute("draggable","true");
@@ -37,8 +36,7 @@ exports.makeDraggable = function(options) {
 			dragFilter = options.dragFilterFn && options.dragFilterFn(),
 			titles = dragTiddler ? [dragTiddler] : [],
 			startActions = options.startActions,
-			variables,
-			domNodeRect;
+			variables;
 		if(dragFilter) {
 			titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
 		}

From 1dffbb074e6f15fea035e2b191cf635822544080 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 20 Dec 2025 13:20:18 +0100
Subject: [PATCH 13/15] fix access to classList being undefined

---
 core/modules/widgets/draggable.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/modules/widgets/draggable.js b/core/modules/widgets/draggable.js
index 6d76d2075..730001d56 100644
--- a/core/modules/widgets/draggable.js
+++ b/core/modules/widgets/draggable.js
@@ -127,9 +127,9 @@ DraggableWidget.prototype.refresh = function(changedTiddlers) {
 	} else {
 		this.dragEnable = this.getAttribute("enable","yes") === "yes";
 		this.makeDraggable(this.domNodes[0]);
-		if(!this.dragHandleSelector && this.dragEnable && !this.domNodes[0].classList.contains("tc-draggable")) {
+		if(!this.dragHandleSelector && this.dragEnable && (this.domNodes[0].classList && !this.domNodes[0].classList.contains("tc-draggable"))) {
 			this.domNodes[0].classList.add("tc-draggable");
-		} else if(!this.dragHandleSelector && !this.dragEnable && this.domNodes[0].classList.contains("tc-draggable")) {
+		} else if(!this.dragHandleSelector && !this.dragEnable && (this.domNodes[0].classList && this.domNodes[0].classList.contains("tc-draggable"))) {
 			this.domNodes[0].classList.remove("tc-draggable");
 		}
 		if(changedAttributes["class"]) {

From ba96a60a16bbed0e7dbba56e984862537ffad623 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 20 Dec 2025 16:24:06 +0100
Subject: [PATCH 14/15] rename dragStartHandlerFunction and
 dragEndHandlerFunction

---
 core/modules/utils/dom/dragndrop.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/modules/utils/dom/dragndrop.js b/core/modules/utils/dom/dragndrop.js
index 944633d2e..f9ffdc0c7 100644
--- a/core/modules/utils/dom/dragndrop.js
+++ b/core/modules/utils/dom/dragndrop.js
@@ -27,7 +27,7 @@ exports.makeDraggable = function(options) {
 	if(!options.selector && ((domNode.tagName || "").toLowerCase() !== "a")) {
 		domNode.setAttribute("draggable","true");
 	}
-	var dragStartHandlerFunction = function(event) {
+	var dragStartHandler = function(event) {
 		if(event.dataTransfer === undefined) {
 			return false;
 		}
@@ -111,7 +111,7 @@ exports.makeDraggable = function(options) {
 		return false;
 	};
 
-	var dragEndHandlerFunction = function(event) {
+	var dragEndHandler = function(event) {
 		if((options.selector && $tw.utils.domMatchesSelector(event.target,options.selector)) || event.target === domNode) {
 			// Collect the tiddlers being dragged
 			var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
@@ -143,11 +143,11 @@ exports.makeDraggable = function(options) {
 	};
 
 	// Add event handlers
-	options.widget.dragStartListenerReference = dragStartHandlerFunction;
-	options.widget.dragEndListenerReference = dragEndHandlerFunction;
+	options.widget.dragStartListenerReference = dragStartHandler;
+	options.widget.dragEndListenerReference = dragEndHandler;
 	$tw.utils.addEventListeners(domNode,[
-		{name: "dragstart", handlerFunction: dragStartHandlerFunction},
-		{name: "dragend", handlerFunction: dragEndHandlerFunction}
+		{name: "dragstart", handlerFunction: dragStartHandler},
+		{name: "dragend", handlerFunction: dragEndHandler}
 	]);
 };
 

From 613679ffceadb62034dafedf8087fd61f25bc62f Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Sat, 20 Dec 2025 16:28:58 +0100
Subject: [PATCH 15/15] remove superfluous object property

---
 core/modules/widgets/draggable.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/core/modules/widgets/draggable.js b/core/modules/widgets/draggable.js
index 730001d56..2e514c58b 100644
--- a/core/modules/widgets/draggable.js
+++ b/core/modules/widgets/draggable.js
@@ -67,7 +67,6 @@ DraggableWidget.prototype.makeDraggable = function(domNode) {
 	if(this.dragEnable) {
 		$tw.utils.makeDraggable({
 			domNode: domNode,
-			remove: false,
 			dragTiddlerFn: function() {return self.getAttribute("tiddler");},
 			dragFilterFn: function() {return self.getAttribute("filter");},
 			startActions: self.startActions,