Drag and drop: a question about the information about the position of its elements

Hi, I’m trying to figure out where a drag and drop holds information about the position of its elements. They have to be saved somewhere. I looked at the reference materials and didn’t find anything. (Or maybe I didn’t understand them well, but still, this remains a mystery to me)


I would like to use these values ​​to be able to create a data tiddler that associates each tiddler of a list with a number. This, at least in theory, could have many useful applications. For example I can sort a list with a drag and drop and when satisfied, with a button create a data tiddler that saves the positions of that list (for lists that I can’t sort with a conventional filter). So then I can recall this particular order later. (On this last part I don’t know, for now, how to do it but I have a couple of leads that could solve this problem).

Or even, I am speculating, to resolve another topic opened by paulgilbert2000. If you could sort a list based on one or more data tiddlers you could make some positions remain fixed (?) Actually I haven’t explored all the possible applications much, but I think there are many.

  • In any case, I would like to know:

— Where is the location information of a drag and drop kept? Is it usable?

— Or in any case, even without accessing this information, if it were unreachable, how could I artificially associate a number that expresses the position to each element of a list of tiddlers?

1 Like

It’s an interesting question. I don’t know the answer at the moment but if I find the answer I’ll tell you. Rather how did you plan to sort the list by data tiddler?

I do know the answer and or work arounds to your questions. However they get complicated depending on context and requirements.

However to move forward the most accessible list ordering process built into tiddlywiki is the tags. As soon as you use a tag on two or more tiddlers you can drag and drop to reorder the tiddlers in the “tag list”. One of these ordered lists can exist for any tag so you could just us another tag eg; the preference tag, to select the same set of tiddlers and adjust that.

  • A set of tiddlers to be “Initially” ordered in a tag can be initially placed in their order using list-before and list-after in each tiddler in the tag list.
  • Once tiddlers are in a tag list using the drag and drop reordering in the tag pill they can be reordered.
    • This will update the “list” field of the “tag tiddler” which then contains a list of all tiddlers with that tag in the order you set.
    • Regardless of the existence or otherwise of this “list” field the filter [tag[tagname]] will return the tiddlers in their current order.

Personally I think we can avoid setting a numeric value to “fix in place” the order of some tiddlers, but it can be done with a button inside which we list all the tiddlers and use a setfieldWidget for each, to set each to the number representing their position.

The following sets a position field in tiddlers with the TableOfContents tag

<$button>
<$list filter="[tag[TableOfContents]]" counter=position>
   <$action-setfield $tiddler=<<currentTiddler>> $field="position" $value=<<position>>/>
</$list>
Save positions
</$button>

You can now use the tag pill drag and drop to reorder the items tagged TableOfContents <<tag TableOfContents>>

The new order can be seen with;

<$list filter="[tag[TableOfContents]]">

</$list>

The captured order can be seen with;

<$list filter="[tag[TableOfContents]nsort[position]]">
  {{!!position}} <$link/><br>
</$list>
  • Note we use nsort for number sorting
  • Note this time we get position from the field not the counter

But you can see from the above the position, even members in the list, is captured in the order at the moment in time the button was pressed.

An alternative way is to save the list of “tiddler titles in the order you want” to a field or tiddler then use this when listing in the desired order.

  • You still need to address the addition of new members to the list.
<$set name=newlist filter="[tag[TableOfContents]]">
<$button>
   <$action-setfield $tiddler=<<currentTiddler>> $field="ordered-list" $value=<<newlist>>/>
Save current tag list order in ordered-list
</$button>
</$set>

<$list filter="[enlist{!!ordered-list}]">
  <$link/><br>
</$list>

Now add the TableOfContents tag to a new tiddler, it will not have a position field, and appear at the top when ordering by position field.

It will not appear at all in the ordered-list

The following gets the current list by sorts it by ordered-list

;Using sortby
<$list filter="[tag[TableOfContents]] +[sortby{!!ordered-list}]">
  <$link/><br>
</$list>
  • Note the new tiddler appears at the top.

I can’t afford the time to keep this demonstration going just now, but will hopefully return. But I hope this makes the issues and methods clearer.

2 Likes

Looks great, very well explained. Thanks @TW_Tones! My needs are met, but if I find some new application I will share it, because for sure I will do some testing in the future

Just out of curiosity, can you give me a hint? I don’t ask for your explanation, if it’s complicated to explain I understand, you’ve already done enough for me, I don’t want to waste your time. I ask you just if you know it, if there is a name (idk like “DragDropPosition”) for the position of the drag and drop. I will investigate myself, just need a hint. If it’s complicated anyway, don’t worry, what I wanted is already achieved, it was just a desire to dig deeper

Perhaps you are looking for the dropzone widget

Anything inside it becomes a drop zone. So you could use multiple lines and content to enlarge the space and the whole area is the drop area?

Sources to drag are draggable I think