No way to find and destroy an already existing Draggable Element

[iliasmertzanos]

Hi guys,

It seems that theres is no way to find and destroy an already existing draggable Element.

At the moment one can only initilize a Draggable using the constructor and only then destroy it.

Or am I understanding something wrong here?

Thank you in advance Draggable team !

[zjffun]

Maybe you need document.querySelector('.your-class').querySelectorAll('[draggable="true"]') to get all HTML draggable elements and then manipulate them, if you are using the native HTML Drag and Drop API.

As you say, this library need to initialize before usage. It mainly design to help you manage containers and draggable elements more easily, sort and swap elements by dragging, and avoiding the poor compatibility currently of Drag and Drop API.

[iliasmertzanos]

Hi @zjffun thanks for your answer.

the main problem that I am having is that I already have a draggable container (ul) with draggable elements (li) and just want to add one more draggable element with out having to reinitilize the hall container.

If the draggable container already exists and reinitilize draggable on this container, that some how leads to strange behavior of my container, because Draggable things it now has two draggable containers (I guess).

One way would be just to destroy the container and reinitilize it adding the new li inside.

Your solution would not work becaus draggable.destroy() must be called on a draggable instance, which we don't get with out calling the constructor.

[zjffun]

@iliasmertzanos You can add a draggable element in a draggable container without any other codes. Because we check if an element is a draggable element, according to the options(https://github.com/Shopify/draggable/tree/master/src/Draggable#options), when dragging.

eg:

    <ul>
        <li>A</li>
        <li>B</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.11/lib/draggable.bundle.js"></script>
    <script>
        const ul = document.querySelector('ul');
        const draggable = new Draggable.Draggable(ul, {
            draggable: 'li'
        });

        // add
        ul.insertAdjacentHTML('beforeend', '<li>C</li>')
    </script>

BTW: Add/remove a draggable container need to call draggable.addContainer(containers: ...HTMLElement)/draggable.removeContainer(containers: ...HTMLElement). Because we saved draggable container when initialized. Add/remove a draggable element/container doesn't need to reinitialize.

[iliasmertzanos]

Thank's guys I already found the same solution.