Examples in plain Javascript please #10

nevf · 2018-07-20T07:53:01Z

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 · 2018-07-21T08:42:06Z

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 · 2018-10-22T12:19:36Z

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

nevf · 2018-10-22T22:22:28Z

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 · 2019-04-19T14:52:30Z

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 · 2019-04-19T15:25:08Z

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 · 2019-10-21T11:54:59Z

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?

nevf mentioned this issue Jul 27, 2018

onMouseDown could be more robust #12

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Examples in plain Javascript please #10

Examples in plain Javascript please #10

nevf commented Jul 20, 2018

nevf commented Jul 21, 2018

dgvinay commented Oct 22, 2018 •

edited

nevf commented Oct 22, 2018 •

edited

stuta commented Apr 19, 2019 •

edited

stuta commented Apr 19, 2019

David-Carty commented Oct 21, 2019

Examples in plain Javascript please #10

Examples in plain Javascript please #10

Comments

nevf commented Jul 20, 2018

nevf commented Jul 21, 2018

dgvinay commented Oct 22, 2018 • edited

nevf commented Oct 22, 2018 • edited

stuta commented Apr 19, 2019 • edited

stuta commented Apr 19, 2019

David-Carty commented Oct 21, 2019

dgvinay commented Oct 22, 2018 •

edited

nevf commented Oct 22, 2018 •

edited

stuta commented Apr 19, 2019 •

edited