# Drag and drop rearranging an array (list)

**URL:** <https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978>\
**Category:** Help Requests\
**Created:** [March 26, 2018, 2:37pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978 "2018-03-26T14:37:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [March 26, 2018, 2:37pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/1 "2018-03-26T14:37:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 26, 2018, 10:38pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/2 "2018-03-26T22:38:44Z")

</div>

check out this 2 repos

> **[buttonwoodcx/bcx-aurelia-dnd](https://github.com/buttonwoodcx/bcx-aurelia-dnd)**
>
> Aurelia Drag and Drop. Contribute to buttonwoodcx/bcx-aurelia-dnd development by creating an account on GitHub.

  

> **[buttonwoodcx/bcx-aurelia-reorderable-repeat](https://github.com/buttonwoodcx/bcx-aurelia-reorderable-repeat)**
>
> An Aurelia repeater supports drag & drop reordering automatically. - buttonwoodcx/bcx-aurelia-reorderable-repeat

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 26, 2018, 11:17pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/3 "2018-03-26T23:17:47Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![jeremyholt](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeremyholt/32/1098_2.png) [@jeremyholt](https://discourse.aurelia.io/u/jeremyholt)\
**Post date:** [March 27, 2018, 7:59am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/4 "2018-03-27T07:59:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [April 5, 2018, 10:44pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/6 "2018-04-05T22:44:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![stoffeastrom](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stoffeastrom/32/720_2.png) [@stoffeastrom](https://discourse.aurelia.io/u/stoffeastrom)\
**Post date:** [April 6, 2018, 6:12am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/7 "2018-04-06T06:12:18Z")

</div>

@Alexander-Taran Actually there is a big fat link that says _Usage_ but that failed miserable obviously 😉

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [April 6, 2018, 6:51am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/8 "2018-04-06T06:51:23Z")

</div>

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 (-:

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [April 6, 2018, 6:58am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/9 "2018-04-06T06:58:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![klaa12924](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/klaa12924/32/1621_2.png) [@klaa12924](https://discourse.aurelia.io/u/klaa12924)\
**Post date:** [April 6, 2018, 8:11am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/10 "2018-04-06T08:11:48Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![stoffeastrom](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stoffeastrom/32/720_2.png) [@stoffeastrom](https://discourse.aurelia.io/u/stoffeastrom)\
**Post date:** [April 6, 2018, 8:54am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/11 "2018-04-06T08:54:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 6, 2018, 12:37pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/12 "2018-04-06T12:37:15Z")

</div>

Hi @stoffeastrom the underneath [oribella](https://github.com/oribella/oribella) looks interesting, do you have some demo pages for that project? Is [aurelia-gestures](https://github.com/oribella/aurelia-gestures) the main/only interface to use oribella?

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 6, 2018, 1:46pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/14 "2018-04-06T13:46:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![stoffeastrom](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stoffeastrom/32/720_2.png) [@stoffeastrom](https://discourse.aurelia.io/u/stoffeastrom)\
**Post date:** [April 24, 2018, 9:01pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/15 "2018-04-24T21:01:52Z")

</div>

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [April 24, 2018, 10:44pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/16 "2018-04-24T22:44:21Z")

</div>

what happened to the repos? they are all archived now?

---

<div class="post-metadata">

**Author:** ![mttmccb](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mttmccb/32/38_2.png) [@mttmccb](https://discourse.aurelia.io/u/mttmccb)\
**Post date:** [April 25, 2018, 10:57pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/17 "2018-04-25T22:57:15Z")

</div>

Did @stoffeastrom take @huochunpeng too seriously? I think he meant it in jest.

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [April 25, 2018, 11:07pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/18 "2018-04-25T23:07:16Z")

</div>

Somehow he was marked as “spam”

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 25, 2018, 11:12pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/19 "2018-04-25T23:12:28Z")

</div>

What the hell is happening?? Does core-team have the visibility of who flagged @stoffeastrom posts?

It looks like someone misunderstood discourse’s flag as a sort of “like”.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 26, 2018, 12:10am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/20 "2018-04-26T00:10:28Z")

</div>

@Alexander-Taran it is in the readme of archived repos. He merged all repos into one by using [`lerna`](https://lernajs.io), similar to [what Aurelia wants to do](https://github.com/aurelia/framework/pull/850).

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 27, 2018, 1:23pm UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/21 "2018-04-27T13:23:14Z")

</div>

For record, I have cleaned up both content and css of [document](https://buttonwoodcx.github.io/doc-bcx-aurelia-dnd) for `bcx-aurelia-dnd` and `bcx-aurelia-reorderable-repeat`.

Most noticeably, implemented a new feature for `reorderable-repeat` to support [**reordering across multiple lists**](https://buttonwoodcx.github.io/doc-bcx-aurelia-dnd/#/multi-lists), while keep the simplicity.

---

<div class="post-metadata">

**Author:** ![jbockle](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jbockle/32/607_2.png) [@jbockle](https://discourse.aurelia.io/u/jbockle)\
**Post date:** [December 22, 2018, 9:34am UTC](https://discourse.aurelia.io/t/drag-and-drop-rearranging-an-array-list/978/22 "2018-12-22T09:34:28Z")

</div>

for those looking for a simple example of how to do this without a plugin check this out: [https://github.com/jbockle/au-drag-example](https://github.com/jbockle/au-drag-example)