Draggable: Provide playground examples
The README has code snippet examples, it should also include a link to a set up playground of that example for the user to try out with actual code.
Any of these sites should be fine:
TheJaredWilcurt
All 20 comments
I was able to get some stuff set up on http://codesandbox.io/ pretty quickly. Are there some guidelines on what sort of examples we'd like to see? I can port over the ones from the README as a starting point but perhaps this issue could be a place to gather suggestions from the community about which sort of use cases would be valuable.
It's always difficult to strike a balance between thoroughness/production examples versus attempting to distill and focus on one or a few concepts. I'm curious to hear what level of detail folks are interested to see within the playground examples.
Cheers~
solomonhawk
on 29 Sep 2017
My first thought when looking at the website demos was "cool, I just want to know if it can hand me back an array of the sorted items, so I can store them".
It would be nice to see examples with frameworks that use DOM diffing like Vue/React/Ember. To see how it interacts with them.
TheJaredWilcurt
on 30 Sep 2017
could it work with react native ?
RyszardRzepa
on 30 Sep 2017
could it work with react native ?
Absolutely, here a link to the react docs: https://reactjs.org/docs/integrating-with-other-libraries.html
tsov
on 1 Oct 2017
At least, it would be nice to show the index.html file for each example
keyvhinng
on 5 Oct 2017
Sorry for the delay everyone - I will be working on some barebones examples to add to this repo as soon as I get the chance.
beefchimi
on 11 Oct 2017
@solomonhawk
I was able to get some stuff set up on http://codesandbox.io/ pretty quickly
Could you provide the link to the stuff you set up?
rafaeleyng
on 20 Oct 2017
Been trying to get it working on a codebin but can't seem to get it to work. Would love to see a demo/sample project as well. Thanks in advance!
jefflam
on 26 Oct 2017
@jefflam if you send me a codebin link i might be able to help get it working. Its going to be another while before I can get examples into the repo
beefchimi
on 26 Oct 2017
@beefchimi Here's just a simple attempt at trying to get Draggable working:
http://jsbin.com/qiwapezora/edit?html,css,js,console,output
Can't seem to get it to work :/
Thanks in advance!
jefflam
on 27 Oct 2017
@jefflam I think you need to add the class .draggable-source to the <li> element like this <li class='draggable-source'>. I use your jsbin i added the class .draggable-source to the <li> elements and works fine, i don't know if this needs to be cleared in the docs or maybe and wrong too, but by this way works fine.
pachecoder
on 27 Oct 2017
@jefflam - as @pachecoder points out, you are not actually specifying which elements are draggable. The library does not assume that all children of a container are draggable.
By default, draggable-source is the class the library looks for. However, you can specify any class you like.
<body>
<ul class="container">
<li class="drag-item">Line 1</li>
<li class="drag-item">Line 2</li>
<li class="drag-item">Line 3</li>
</ul>
</body>
var containers = document.querySelectorAll('.container');
var draggable = new window.Draggable.Sortable(containers, {
draggable: '.drag-item',
appendTo: '.container',
classes: {
body: 'draggable-container--is-dragging',
},
});
draggable.on('sortable:sorted', function() {
console.log('sorted!');
});
Give those snippets a try and let us know if you still have issues.
beefchimi
on 27 Oct 2017
Hi @beefchimi thanks for this fantastic library, is there any way to suppress the class draggable-droppable--occupied from Droppable, because when i add a new element this is stoping me to keep adding elements, it was solved by removing the class, but i don't know if am missing something.
This is a little codepen.io example
pachecoder
on 27 Oct 2017
Oooooh, riiiight. Yea I believe we designed this so Droppable containers only accept a single child... makes sense to allow more.
@tsov what do you think? Maybe Droppable containers can default to a single child, but accept a option to specify capacity (a number or unlimited)?
The occupied class still makes sense as soon as there is at least 1 child, but perhaps still allow adding children until the capacity is met?
beefchimi
on 27 Oct 2017
@pachecoder thanks for bringing this up!
Droppable containers only accept a single child
As @beefchimi mentioned, Droppable currently only allows to drop a single draggable element into a droppable element, but I'd be open to allow multiple elements via a capacity option, or something similar 馃憤 We will explore a solution
@pachecoder As for you codepen example, you could also use Draggable.Sortable, if you literally change Draggable.Droppable to Draggable.Sortable it will work right out of the box, and also maintains the order (instead of just appending to the container)
tsov
on 27 Oct 2017
Silly me -- I thought I did try adding the class before but couldnt get it to work either.. but either ways, thanks for the help everyone!
jefflam
on 29 Oct 2017
Here's a working update to @jefflam 's jsbin for the lazy:
http://jsbin.com/qexeniwige/1/edit?html,css,js,console,output
lbrugg
on 1 Nov 2017
Might need/want to clarify that there's some load delay? For example, this code does not work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
<script>
new window.Draggable.Sortable(document.querySelectorAll('ul'), { draggable: 'li' })
.on('drag:start', () => console.log('drag:start'))
.on('drag:move', () => console.log('drag:move'))
.on('drag:stop', () => console.log('drag:stop'));
</script>
<style>
ul {
list-style: none;
}
li {
height: 20px;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ul>
</body>
</html>
but this code does:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
<style>
ul {
list-style: none;
}
li {
height: 20px;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<ul>
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
</ul>
<script>
new window.Draggable.Sortable(document.querySelectorAll('ul'), { draggable: 'li' })
.on('drag:start', () => console.log('drag:start'))
.on('drag:move', () => console.log('drag:move'))
.on('drag:stop', () => console.log('drag:stop'));
</script>
</body>
</html>
Maybe this should be obvious, but I burned about 45 minutes on this just trying to get the library setup and functioning...
bpkennedy
on 5 Dec 2017
@bpkennedy rule of thumb - when executing scripts that need to parse the DOM, always wait for document ready. By loading your scripts at the bottom of the document, the DOM will be ready by the time the code gets executed.
@tsov is it worth mentioning this in the README?
beefchimi
on 6 Dec 2017
beefchimi
on 16 Jan 2018
Related issues
mbarakaja
路
3Comments
ddemaree
路
5Comments
pie6k
路
5Comments
dchenk
路
3Comments
philippkuehn
路
4Comments
Most helpful comment
My first thought when looking at the website demos was "cool, I just want to know if it can hand me back an array of the sorted items, so I can store them".
It would be nice to see examples with frameworks that use DOM diffing like Vue/React/Ember. To see how it interacts with them.