draggable widget: actions on drag-start and drag-end (#3203)

* pass drag-start end drag-end actions to draggable

* Update dragndrop.js

* Update dragndrop.js

* Update dragndrop.js

* Update dragndrop.js

* Update dragndrop.js

* renaming dragstart/dragend -> start/end

* renaming dragstart/dragend -> start/end

* adding docs

core/modules/utils/dom/dragndrop.js

@@ -38,7 +38,8 @@ exports.makeDraggable = function(options) {
 			// Collect the tiddlers being dragged
 			var dragTiddler = options.dragTiddlerFn && options.dragTiddlerFn(),
 				dragFilter = options.dragFilterFn && options.dragFilterFn(),
-				titles = dragTiddler ? [dragTiddler] : [];
+				titles = dragTiddler ? [dragTiddler] : [],
+			    	startActions = options.startActions;
 			if(dragFilter) {
 				titles.push.apply(titles,options.widget.wiki.filterTiddlers(dragFilter,options.widget));
 			}
@@ -49,6 +50,10 @@ exports.makeDraggable = function(options) {
 				$tw.dragInProgress = domNode;
 				// Set the dragging class on the element being dragged
 				$tw.utils.addClass(event.target,"tc-dragging");
+				// Invoke drag-start actions if given
+				if(startActions !== undefined) {
+					options.widget.invokeActionString(startActions,options.widget,event,{actionTiddler: titleString});
+				}
 				// Create the drag image elements
 				dragImage = options.widget.document.createElement("div");
 				dragImage.className = "tc-tiddler-dragger";
@@ -100,7 +105,20 @@ exports.makeDraggable = function(options) {
 		}},
 		{name: "dragend", handlerFunction: function(event) {
 			if(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;
+				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) {
+					options.widget.invokeActionString(endActions,options.widget,event,{actionTiddler: titleString});
+				}
 				// Remove the dragging class on the element being dragged
 				$tw.utils.removeClass(event.target,"tc-dragging");
 				// Delete the drag image element

core/modules/widgets/draggable.js

@@ -52,6 +52,8 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 		domNode: domNode,
 		dragTiddlerFn: function() {return self.getAttribute("tiddler");},
 		dragFilterFn: function() {return self.getAttribute("filter");},
+		startActions: self.startActions,
+		endActions: self.endActions,
 		widget: this
 	});
 	// Insert the link into the DOM and render any children
@@ -67,6 +69,8 @@ DraggableWidget.prototype.execute = function() {
 	// Pick up our attributes
 	this.draggableTag = this.getAttribute("tag","div");
 	this.draggableClasses = this.getAttribute("class");
+	this.startActions = this.getAttribute("startactions");
+	this.endActions = this.getAttribute("endactions");
 	// Make the child widgets
 	this.makeChildWidgets();
 };

editions/tw5.com/tiddlers/widgets/DraggableWidget.tid

@@ -7,7 +7,9 @@ type: text/vnd.tiddlywiki
 
 The DraggableWidget creates a DOM element that can be dragged by the user. It only works on browsers that support drag and drop, which typically means desktop browsers, but [[there are workarounds|Mobile Drag And Drop Shim Plugin]].
 
-The draggable element can be assigned a list of tiddlers that are used as the payload. See DragAndDropMechanism for an overview.
+The draggable element can be assigned a list of tiddlers that are used as the payload.
+If desired it can invoke actions when dragging starts and when it ends.
+See DragAndDropMechanism for an overview.
 
 ! Content and Attributes
 
@@ -16,7 +18,11 @@ The draggable element can be assigned a list of tiddlers that are used as the pa
 |filter |Optional filter defining the payload tiddlers for the drag |
 |class |Optional CSS classes to assign to the draggable element. The class `tc-draggable` is added automatically, and the class `tc-dragging` is applied while the element is being dragged |
 |tag |Optional tag to override the default "div" element |
+|startactions |Optional action string that gets invoked when dragging ''starts'' |
+|endactions |Optional action string that gets invoked when dragging ''ends'' |
 
 Either or both of the ''tiddler'' and ''filter'' attributes must be specified in order for there to be a payload to drag.
 
+The ''actionTiddler'' variable is accessible in both //startactions// and //endactions//. It holds the payload tiddler(s) specified through the //tiddler// attribute.
+
 The LinkWidget incorporates the functionality of the DraggableWidget via the ''draggable'' attribute.