Examples in plain Javascript please

nevf commented 6 years ago

All the examples, which are great by the way, use React and I am not a React person. Further my attempt at getting smooth-dnd to work in a plain JS app didn't get very far. The entire containerElement dragged.

It appears as though the React etc. libraries also include various CSS which isn't discussed in the docs. Also smooth-dnd inserts its own wrapper element, which isn't mentioned and can beak existing markup.

So is it possible to get a complete example or two in plain JS without using React, Vue etc.

Thanks.

nevf commented 6 years ago

I've made some progress today, however I've hit a stumbling block. In my use case the draggable elements inside a container are dynamically added and removed. This doesn't work as smooth-dnd expects a static set if draggable elements which are defined before it is called.

I've tried various things including using .dispose() but without success.

To resolve this it would be great to see and API exposed for dynamically updating the list of draggable elements. I would think this is a reasonably common requirement.

Thanks.

dgvinay commented 6 years ago

@nevf Can you guide me on how to use this library in plain JavaScript? Few lines of sample code would be helpful. Thanks.

nevf commented 6 years ago

This should help:

import SmoothDnD from 'smooth-dnd';

    SmoothDnD( document.querySelector( some_container_element ),
               // options
               { dragHandleSelector: ...
                dragClass: ...
                dropClass: ...
               }
    )

I'm using SmoothDND to enable Tabs to be rearranged in our Web App Clibu and plan to use it for other UI elements. You can see a gif of it on our Blog.

stuta commented 5 years ago

Every draggable element must have smooth-dnd-draggable-wrapper class in it. It took me a long time to figure it out.

Html page below works in new browsers that support dynamic import (Chrome, Safari). But moving items will cause an error: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <base href="" />
    <title>smooth-dnd test</title>
</head>

<body>
    <div id="container">
        <div class='smooth-dnd-draggable-wrapper'>Draggable 1</div>
        <div class='smooth-dnd-draggable-wrapper'>Draggable 2</div>
        <div class='smooth-dnd-draggable-wrapper'>Draggable 3</div>
    </div>
    <script type="module">
        import('./node_modules/smooth-dnd/dist/index.js').then(() => {
            var options = {}
            var containerElement = document.getElementById('container');
            var container = SmoothDnD.default(containerElement, options);
            console.debug(container)
        }).catch((err) => {
            alert(`smooth-dnd dynamic import failed with error: ${err}`)
        })
    </script>
</body>

</html>

stuta commented 5 years ago

This works also in Firefox:

    <script type="module">
        import './node_modules/smooth-dnd/dist/index.js'
        var options = {}
        var containerElement = document.getElementById('container');
        var container = SmoothDnD.smoothDnD(containerElement, options);
        console.debug('SmoothDnD container:', container)
    </script>

David-Carty commented 5 years ago

Looks great, but totally painful if you just want to keep things simple and use vanilla JS without the module syntax, how hard is this to make available via a CDN?

kutlugsahin / smooth-dnd

Examples in plain Javascript please #10