estevan gomez estevan gomez - 5 months ago 90
AngularJS Question

Angular2 NG2-Dragula drag n drop options

I am working on Angular2 and NG2-Dragula

I am also using Bootstrap 3.

Here is the html and constructor code:

HTML:

<div class="container">
<div class="row">

<div class="col-md-4" [dragula]='"sortable"'>
<div class="box">1 Moving items between containers works as usual</div>
</div>
<div class="col-md-4" [dragula]='"sortable"'>
<div class="box">2 Moving items between containers works as usual</div>
</div>
<div class="col-md-4" [dragula]='"sortable"'>
<div class="box">3 Moving items between containers works as usual</div>
</div>

</div>
</div>


Constructor:

constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('sortable', {
revertOnSpill: false
});
}


At the moment it's only sorting / moving sideway, but when I need is for it to be able to be moved any direction.

Is this not happening because of the constructor code being wrong or the html?

How can I fix this?

Answer

Just change the html to this:

<div class="container">
    <div class="row" [dragula]='"sortable"'>

        <div class="col-md-4">
            <div class="box">1 Moving items between containers works as usual</div>
        </div>
        <div class="col-md-4">
            <div class="box">2 Moving items between containers works as usual</div>
        </div>
        <div class="col-md-4">
            <div class="box">3 Moving items between containers works as usual</div>
        </div>

    </div>
</div>

Added the [dragula]='"sortable"' to the div class="row"

Comments