I remember my
days with jQuery. When I wanted to implement for example
sortable list, I searched on Google for some plugin, included jQuery and the plugin, initialized it and it worked. And now I am working on some Dart application where I would love to have sortable list, so I have to
implem...
OMG, wait! No, I don't have to!
My goal is to have a list (usually
ul -
li elements) with a possibility to reorder list items with
drag and drop. In this blog post I will take a look at some libraries which interested me on
pub.
The libraries are
assortment and
dnd.
assortment
assortment is a simple library, which can create a sortable list. Library is really easy to use, you just add import for the library:
import 'package:assortment/assortment.dart';
Create an
ul - li list in HTML:
<ul id="sortable-list">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
Then you need to create new
Assortment object with retrieved
ul list as a parameter and then it is needed to add it retrieved children -
li elements.
Assortment assortment = new Assortment(querySelector('#sortable-list'));
assortment.addElements(querySelectorAll('#sortable-list li'));
Usually you also want to do something after the change in the list (for example update model) so you can listen for prepared events from
assortment:
- onDragStart
- onDragEnter
- onDragEnd
AssortmentEvent allows you to get the event and elements which participated in reorder.
For example:
assortment.onDragEnd.listen((AssortmentEvent event) {
print("onDragEnd fired!");
});
That's it! You have a simple drag and drop sortable list. The library works with any elements, so you can normally use
div elements instead of
ul - li list.
And finally, you can find this library on
pub and
Github.
dnd: Dart Drag and Drop
Library
Dart Drag and Drop allows you to work with drag and drop in whatever way you can imagine. You can create basic draggable object, free dragging object, dragging object using horizontal or vertical axis and more! It also supports creating of sortable lists which was the thing, I wanted.
 |
| http://code.makery.ch/library/dart-drag-and-drop/ |
For more demos of this library take a look at the
official website.
How to create sortable list? Import the library:
import 'package:dnd/dnd.dart';
Then create
Draggable and
Dropzone object with
AvatarHandler (this ensures visual feedback during dragging) which are using the retrieved
li elements.
Draggable draggable = new Draggable(querySelectorAll('#sortable-list li'),
avatarHandler: new AvatarHandler.clone());
Dropzone dropzone = new Dropzone(querySelectorAll('#sortable-list li'));
And finally define
onDrop event on
dropzone:
dropzone.onDrop.listen((DropzoneEvent event) {
swapElements(event.draggableElement, event.dropzoneElement);
});
swapElements() is your implementation of changing position of elements in the list. For example take a look at the
official example but your implementation can be different.
It is also possible to listen to different types of events for both objects.
Draggable object:
- onDrag
- onDragStart
- onDragEnd
Dropzone object:
- onDrop
- onDragEnter
- onDragOver
- onDragLeave
And that's also it. I really recommend to go through
all the examples because this library can do
lots of things. And a big plus is, that the list also works on mobile. You can use it also with
div elements and the library is available on
pub and
Github.
That's all for today. I really like both of these libraries and I think that they can help a lot. Have you tried any of these libraries?
Happy Dart coding! :-)
