Drag&Drop interface to move items from pages-section to field-field

Resources Plugins
1

I’m trying to write a plugin that allows panel users to fill multiple pages fields visually from a big collection of items. Ideally this would be a drag&drop gesture. I already made some progress by writing my own pages_section that looks and feels like the Kirby original. It corresponds with a custom pages_field that accepts items dragged from the section.

The key for what I’m trying to do is to set the group attribute on the vue-draggable components. I configure the pages section to clone the dragged item, rather than moving it over.

// in my CustomPagesSection.vue
<draggable ... :group="{ name: 'people', pull: 'clone', put: false }">

// in my CustomPagesField.vue
<draggable group="people" @change="saveField">

This is somehow working for me. The CustomPagesField.vue can then save when the item was dropped.

I’m using a lot of copy&paste code to replicate the look and feel of the Kirby section and field. I’d like to reuse and extend more of what’s already there, but I can’t get it working.

k-collection, k-draggable, k-item seem to be the ingredients but I’m struggeling at the very beginning: how to extend k-draggable to feature a group attribute?

Hope somebody can point me to the right direction.

Thank you & Hi!
Hans

2

… sharing my own progress here :slight_smile:

I experimented with extending the k-draggable in my plugins/index.js like so:

components: {
		'k-draggable': {
			extends: 'k-draggable',
			computed: {
				dragOptions() {
					return {
						group: {name: 'people'},  // EXTENDED
						sort: this.sortable,
						disabled: this.sortable === false,
						draggable: ".k-draggable-item"
					};
				}
			}
		}
	}

By doing so I can drag items over to my custom field in the sidebar. This will work with as little as this template:

<k-items :items="entries" layout="cards" size="tiny" :sortable="true">

It works as both the Kirby pages section, and k-items with layout=cards will use the extended k-draggable component. Both will have the group-option configured and allow dragging from one container into the other.