mirrors/TiddlyWiki5
1
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5.git synced 2026-01-21 12:02:56 -08:00
Code Issues Projects Releases Packages Wiki Activity

enhance droppable widget

Browse source
This commit is contained in:
BurningTreeC 2025-12-18 20:49:04 +01:00
parent 75447a8e7f
commit fc0ea002c4
2 changed files with 52 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
core/modules/widgets/droppable.js
View file

@ -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";

23
core/wiki/macros/dragndrop.tid
View file

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