Drag and drop rearranging an array (list)

#1

I know it looks like I’m being really lazy, but could someone please point me to a simple working demo of using drag and drop to rearrange a simple array/list?

It only needs to rearrange the list with drag and drop and work with aurelia-cli (require). Ideally it would look like the oribella simple-Y example.

I’ve looked at oribella-aurelia-sortable, aurelia-sortablejs and either can’t get them to install or there is not enough documentation.

The other options such as Dragula are just overkill for my needs, and even then I couldn’t find an example which shows how to re-arrange a simple list.

I’ve also looked at sortablejs and jquery-ui but don’t have the skills to turn it into a component that I can use in aurelia.

Many thanks

#2

check out this 2 repos


#3

I am the author. Thanks Alex for sharing them. I have been planning to rewrite the doc in next few months, then share to the community.

The current doc is OK, not that bad. reorderable-repeat is deadly simple, a good feature for everyone. Most of you would not need to go down to bcx-aurelia-dnd.

#4

Wow - that’s just such an amazing component!

It works like pure magic!

The minimum default configuration does exactly what I need - no more and no less.

Thank you so much
Jeremy

#5

@jeremyholt I’m the author of oribella-aurelia-sortable and I’m curios of what you couldn’t get working. Did you follow the instructions?

#6

@stoffeastrom instructions are undiscoverable (-: from the readme that is.

#7

@Alexander-Taran Actually there is a big fat link that says Usage but that failed miserable obviously :wink:

#8

well for myself… I expect to have basic instructions on how to install the package in the readme.
obviously I do not read it all.
I scan the structure and when I see the pattern… git clone… npm install…
I make my conclusion.

I think I might not be the only one (-:

#9

Yep I missed the big usage link, I would expect the link to be in the usage section not the header itself

#10

Hi all, new here, just wanted to say we have been using oribella-aurelia-sortable and it’s just perfect.
Especially the possibility of dragging and dropping between different array lists is very nice…

#11

@mttmccb Yes that makes sense!
@klaa12924 Sounds great!

#12

Hi @stoffeastrom the underneath oribella looks interesting, do you have some demo pages for that project? Is aurelia-gestures the main/only interface to use oribella?

#13

Hi @huochunpeng

The aurelia-sortable and aurelia-gestures are only the aurelia side. You can even use the framework without oribella as long as you register your own gestures. However the gestures implemented in oribella are well defined and should meet most of your requirements.

Unfortunately I haven’t had the time to do proper demo/documentation. To use oribella you just import the gesture you want and bind it to an element e.g

import { oribella, Tap, Swipe } from 'oribella';

oribella.on(Tap, document, { end: () => console.log('Tap'); } );
oribella.on(Swipe, document, { update: () => console.log('Swiping'); } );
#14

Man, please spend some time on documentation. I thought I am bad, you did even less than me.

Thx for your code sample. It will definitely help when I want to provide better mobile support.