Draggable: confused about the usage of Droppable

[poor-branson]

I was confused about the usage of Droppable.
Why this code doesn't work as the example does?

import { Droppable } from '@shopify/draggable'

const drop = new Droppable(document.querySelectorAll('.container'), {
  draggable: '.draggable',
  dropzone: '#dropzone'
})

  <div class="container">
    <div class="item">

    </div>
  </div>

  <div class="container">
    <div id="dropzone"></div>
  </div>

[beefchimi]

Droppable docs still have not received the love they require... so apologies for this being a bit mysterious.

What is most likely the issue is:

• Your item needs to also originate from a Dropzone
• That origin Dropzone needs to specify that it is "occupied" on page load, by way of a specific classname _(classes can be customized)_

To start, I would trouble shoot by changing the following:

JS

import { Droppable } from '@shopify/draggable'

const drop = new Droppable(document.querySelectorAll('.container'), {
  draggable: '.item-to-drag',
  dropzone: '.dropzone',
});

HTML

<section class="container container--1">
  <article class="dropzone dropzone--1 draggable-droppable--occupied">
    <h6>This is an occupied dropzone</h6>

    <div class="item-to-drag">
      <p>Plz drag me</p>
    </div>
  </article>
</section>

<section class="container container--2">
  <article class="dropzone dropzone--2">
    <h6>Waiting to recieve a draggable source...</h6>
  </article>
</section>

For more info, I recommend checking out the Droppable example, as well as its source code.

Give that a shot and let us know what happens.

Cheers!

[poor-branson]

@beefchimi Thanks for your patient. Your answer helps me a lot!!!
Again, Thank you.

But i have to say, the documentation of Draggable is sometimes quiet confusing. Maybe it just because there is no relative code of html and stylesheet. But i dare to say it won't help unless you clearly mention of that in the documentation and examples.

If possible, i think i may could contribute to the work of documentation and translation.

Again, thanks for your help.