diff --git a/core/modules/utils/dom/dragndrop.js b/core/modules/utils/dom/dragndrop.js index 785b9bd25..5ab3831a4 100644 --- a/core/modules/utils/dom/dragndrop.js +++ b/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 diff --git a/core/modules/widgets/draggable.js b/core/modules/widgets/draggable.js index 8ee6e957b..d1bdf2a16 100644 --- a/core/modules/widgets/draggable.js +++ b/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(); }; diff --git a/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid b/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid index c244d3746..5ae28567e 100644 --- a/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid +++ b/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.