How to do horizontal drag and replace

Question

Use case description : I'm trying use drag and drop for a three columns to change their order (switch their position horizontally). I tried the first example in the demo page , but in my case i only want to drag horizontally, my markup look like the following :

<div class="horizontal segments" dragula="DRAGULA_FACTS">
<div class="column">content1</div>
<div class="column">content2</div>
<div class="column">content3</div>
</div>

It does relatively work, but only for dragging from right to left, and not in the opposite way (left to right). Is there any way to achieve it ?

score 2 · Accepted Answer · answered Nov 13 '18 at 16:35

I figured it out, it's mentioned in bavecqua/dragula , you should specify direction in the options, so I added this to my home.component.ts and changed the group name :

import {DragulaService} from 'ng2-dragula';

  constructor(private dragulaService: DragulaService) {
    dragulaService.createGroup("FEED", {
      direction:'horizontal'
    });
  }

How to do horizontal drag and replace

1 Answers1