How to add new items

[pbalasimonsngular]

Hi @sashamilenkovic and all,

I’m developing an app in Next.js using the drag-and-drop plugin (v0.1.5), but I’m encountering an issue when trying to dynamically update the list of draggable items.

My goal is to add, delete, and update items in the list that I want to drag. However, I’m unable to achieve this functionality properly.

Here’s a simplified version of my code:

export function TestDynamicItems() {
	const [items, setItems] = useState<string[]>(['foo', 'bar', 'foobar']);

	const [parent, itemsDND] = useDragAndDrop<HTMLDivElement, string>(items, {
		plugins: [animations(), multiDrag({})],
	});

	return (
		<>
			<button
				onClick={() => {
					setItems([...items, 'new item!']);
				}}
			>
				ADD NEW ITEM
			</button>
			<h1>TestDynamicItems</h1>
			<div ref={parent}>
				{itemsDND.map((item) => (
					<div key={item}>{item}</div>
				))}
			</div>
		</>
	);
}

When I click the "ADD NEW ITEM" button, I expect the new element to appear in the list and be draggable, but it seems like the useDragAndDrop hook only initializes the drag-and-drop functionality once (on the first render) and doesn’t update when the list changes.

Is there a specific way to make the hook reinitialize or handle updates to the list dynamically?

Any guidance on how to achieve this would be greatly appreciated!

Thanks in advance!

[sashamilenkovic]

@pbalasimonsngular Hey there! Here's a little repo I spun up showing how to use both the useDragAndDrop hook and the dragAndDrop hook: https://github.com/sashamilenkovic/dnd-discussions-101

useDragAndDrop is a composable that returns state for you along with a setter for it.

If you would like to reuse your existing state and pass that to the drag-and-drop, use the dragAndDrop hook.

Let me know if you have any questions.

[seahawk1986]

How would that work with the Vue-specific implementation?

https://drag-and-drop.formkit.com/#usedraganddrop doesn't seem to return a setter in the Vue case and I am not sure what needs to be done to the "a reactive array of values" object returned by useDragAndDrop() to change the content successfully - channelCandidates seems to be a Ref<ChannelInterface[], ChannelInterface[]> if I use a snipped like this:

import { useDragAndDrop } from '@formkit/drag-and-drop/vue'

const [channelCandidatesRef, channelCandidates] = useDragAndDrop(
  [
    {
      title: 'test',
      id: 'test0'
    } as ChannelInterface
  ],
  { group: 'channels', dragHandle: '.v-icon' }
)

[sashamilenkovic]

@seahawk1986 You are right. For Vue, useDragAndDrop does not return a setter. Instead, it returns a ref of an array of values that you can mutate directly:

Here's a quick example in Vue:

const [parent, values] = useDragAndDrop([
  {
    id: "10_of_clubs",
    src: "/cards/10_of_clubs.png",
  },
  {
    id: "jack_of_hearts",
    src: "/cards/jack_of_hearts.png",
  },
]);

function addValue() {
  values.value.push({
    id: "queen_of_spades",
    src: "/cards/queen_of_spades.png",
  });
}

Also should be worth noting that the values you are v-foring in your template should be the values returned by the useDragAndDrop composable and the draggable items themselves should have keys, like like this:

    <ul ref="parent">
      <li
        v-for="card in values"
        :key="card.id"
        class="item"
        :id="props.id + '_' + card.id"
      >
        <img :src="`${card.src}`" />
      </li>
    </ul>
    <button :id="props.id + '_add_value'" @click="addValue">Add value</button>
    ```

[pbalasimonsngular]

Hi @sashamilenkovic again,

After two days of testing your response and making progress in my development, I can say that your first example using useDragAndDrop works perfectly. However, after updating my array, I encountered another warning that I cannot understand.

Here is my code:

<ul className={`${styles.grid}`} ref={parent}>
    {productsDND?.map((item: ProductListItem) => (
        <li className={item.images.landscape ? styles.featured : ''} key={item.id}>
            <ProductCard key={item.id} item={item} />
        </li>
    ))}
</ul>
<div role='presentation' ref={loadMoreResultsRef} />

As you can see, this is my list of products. At the end of the list, I have a container that loads more products when it appears in the viewport (I want to do a infinite scroll). It works, but I receive the following message in the browser:

The number of enabled nodes does not match the number of values.

However, if I add the new products through an onClick event of a button, it works fine without displaying this message.

Do you know what is the problem, or what can I do to avoid this message? I would like to update the list with inifinite scroll.

Thanks you so much!

[sashamilenkovic]

@pbalasimonsngular Hey there! Hard to tell from the snippet. Any chance you can put together a reproduction, either a link to a github repo (preferred) or code sandbox/stackblitz?

[pbalasimonsngular]

Thanks for your time, @sashamilenkovic

scroll.mov

I've created this repo: https://github.com/pbalasimonsngular/test-formkit-dnd.
You can clone it and reproduce the issue I'm facing.

It's a simple setup: a list where, when the scroll reaches the end, 10 more items are loaded. In this case, I encounter the warning I mentioned earlier [see first video].

However, when I load more items via an onClick event, everything works fine without any warnings [see second video].

scroll.mov

button.mov

I want to keep the scroll infinite way, but without the message. I don't know if I am doing something bad. I would appreciate you any help.

Thanks again

[sashamilenkovic]

Appreciate the reproduction; I will take a look when I have the chance