ng2-dragula implement drag 'n drop one side with sorting and different template

Question

I've managed to get the drag and drop to work to only drop from one side to the other, but sorting is being cancelled out. I wish to be able to keep sorting on one side (target side) and not on the other side (source side).

Also, I wish to replace the HTMLElement with a different template when being dropped, and even better: while being dropped as well.

I find the documentation to be lacking clear use cases and would love to see how this could be done, and what I should be using.

This is my code so far:

import {Component} from "@angular/core";
import {DragulaService} from "ng2-dragula";
import {DragAndDropHelper} from "../../../helpers/DragAndDropHelper";

@Component({
    selector: 'app-segment-dropzone',
    templateUrl: './segment-dropzone.component.html',
    styleUrls: ['./segment-dropzone.component.scss']
})
export class SegmentDropzoneComponent {
    constructor(private dragulaService: DragulaService) {
        dragulaService.setOptions('elements-bag', {
            copy: true,
            copySortSource: true,
            accepts: function (el, target, source, sibling) {
                return target.id === 'elements-dropzone';
            },
        });
        dragulaService.drag.subscribe((value) => {
            this.getElementView(DragAndDropHelper.getElementIdFromDraggedItem(value[1]));
        });
    }

    public getElementView(elementId: string) {
        console.log(elementId);
    }
}

target html

<div class="row">
    <div class="col-lg-12">
        <ul [dragula]='"elements-bag"' id="elements-dropzone">
            <li>first item</li>
            <li>second item</li>
        </ul>
    </div>
</div>

source html

<div class="mt-list-container list-simple">
    <ul [dragula]='"elements-bag"' id="elements-list">
        <li class="mt-list-item" *ngFor="let element of elements" [attr.data-element-id]="element.id" >
            <div class="list-icon-container done">
                <i class="icon-check"></i>
            </div>
            <div class="list-datetime">{{ element.type }}</div>
            <div class="list-item-content">
                <h3 class="">{{ element.name }}</h3>
            </div>
        </li>
    </ul>
</div>

Goal in short:

1. Drag and drop only from the right to the left side: done, is done using accept property.
2. Allow sorting on the left side (target side, id="elements-dropzone" ) only. Not on the right side!
3. Change element template while being dragged and after being dropped.

Would love to see any pointers on this. Thank you very much.

Answer 1

You can use native HTML drag and drop:

<script>
 function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
</script>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">