simplify code - make sure the item is visible when dragged

core/wiki/macros/list-links-horizontal-draggable.tid

@@ -12,14 +12,14 @@ tags: $:/tags/Macro $:/tags/Global
 </$let>
 \end
 
-\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"yes",enable:"yes")
+\procedure list-links-horizontal-draggable(tiddler,field:"list",emptyMessage,type:"span",subtype:"span",class:"",itemTemplate,dragHandle:"⠿",enable:"yes")
 	\procedure customSort() [<tiddler>get<field>enlist-input[]] :sort:alphanumeric:caseinsensitive[subfilter{$:/config/Tags/CustomSort/subfilter}]
 
 <span class="tc-horizontal-draggable tc-tiny-gap-right">
 	<$let targetTiddler=<<tiddler>>
 		targetField=<<field>>
 		_enable={{{ [<tv-enable-drag-and-drop>!match[no]then<enable>else[yes]] }}}
-		_dragHandle={{{ [<_enable>match[yes]then<dragHandle>else[no]] }}}
+		_dragHandle={{{ [<_enable>match[yes]then<dragHandle>else[]] }}}
 	>
 	<$log/>
 		<$genesis $type=<<type>> class=<<class>>>
@@ -30,16 +30,15 @@ tags: $:/tags/Macro $:/tags/Global
 					enable=<<_enable>>
 				>
 					<span class="tc-horizontal-draggable-placeholder"/>
-					<% if [<_dragHandle>match[yes]] %>
-						<$draggable tiddler={{!!title}} tag="span"
-							class="tc-draggable-handle"
-						/>
-					<% endif %>
 					<$draggable tiddler={{!!title}} tag="span"
-						enable={{{ [<_dragHandle>!match[yes]then<_enable>else[no]]  }}}
+						enable=<<_enable>>
 						class="tc-horizontal-draggable-item"
 					>
-						<span class="tc-draggable-item"/>
+						<% if [<_dragHandle>!is[blank]] %>
+							<span class="tc-draggable-handle tc-tiny-gap-right">
+								<<_dragHandle>>
+							</span>
+						<% endif %>
 						<% if [<itemTemplate>is[variable]] %>
 							<$transclude $variable=<<itemTemplate>>>
 								<<list-links-horizontal-draggable-caption>>

editions/tw5.com/tiddlers/demonstrations/Weekdays/Days of the Week.tid

@@ -1,6 +1,6 @@
 created: 20150117192110000
 list: Monday Tuesday Wednesday Thursday Friday Saturday Sunday
-modified: 20211116221246915
+modified: 20240716222620082
 my-special-list: [[listed Operator (Examples)]]
 short: Mon Tue Wed Thu Fri Sat Sun
 tags: [[Operator Examples]]

editions/tw5.com/tiddlers/macros/examples/list-links-horizontal-draggable Macro (Examples).tid

@@ -1,6 +1,12 @@
 created: 20240712134945885
-modified: 20240712135014913
+modified: 20240716222408892
 title: list-links-horizontal-draggable Macro (Examples)
 type: text/vnd.tiddlywiki
 
 <$macrocall $name=".example" n="1" eg="""<<list-links-horizontal-draggable tiddler:"Days of the Week">>"""/>
+
+<$macrocall $name=".example" n="2" eg="""<<list-links-horizontal-draggable tiddler:"Days of the Week" dragHandle:"">>"""/>
+
+<$macrocall $name=".example" n="3" eg="""<<list-links-horizontal-draggable tiddler:"Days of the Week" dragHandle:{{$:/core/images/close-others-button|11px}}>>"""/>
+
+<$macrocall $name=".example" n="4" eg="""<<list-links-horizontal-draggable tiddler:"Days of the Week" enable:"no">>"""/>

editions/tw5.com/tiddlers/macros/list-links-horizontal-draggable Procedure.tid

@@ -1,6 +1,6 @@
 caption: list-links-horizontal-draggable
 created: 20240712134619467
-modified: 20240716135427247
+modified: 20240716221918196
 tags: Macros [[Core Macros]]
 title: list-links-horizontal-draggable Procedure
 type: text/vnd.tiddlywiki
@@ -33,7 +33,7 @@ The <<.def list-links-horizontal-draggable>> [[procedure|Procedures]] renders th
 : Optional title of a tiddler to use as the template for rendering list items
 
 ; dragHandle
-: Defaults to: ''yes''. If shows a drag handle: `⠿` in front of every item. If set to ''no'' the handle is removed
+: Defaults to: `⠿`. It shows ⠿ in front of every item. If set to an ''empty string'' the handle is removed
 
 ; enable
 : Defaults to: ''yes''. If set to ''no'' the draggability function and the handles are removed

themes/tiddlywiki/vanilla/base.tid

@@ -543,8 +543,7 @@ a.tc-tiddlylink-external:hover {
 }
 
 /* content: braille pattern 283F */
-.tc-draggable-handle::before {
-	content: '⠿';
+.tc-draggable-handle {
 	cursor: ew-resize;
 	display: inline-block;
 }
@@ -575,11 +574,6 @@ a.tc-tiddlylink-external:hover {
 		display: block;
 		min-height: 2em;
 	}
-	.tc-draggable-handle::before {
-		content: '⠿';
-		padding-left: 10px;
-		padding-right: 7px;
-	}
 }