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] 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