Duplicated button is not draggable


#1

Hi all,

I’m building a app to drag buttons to a picture as indication of work to do.
But when I duplicate a button in jQuery (Included jquery library for this).

After it duplicates I try to drag the button, but it’s not working.
Can somebody help me out?

Here is my code.
home.html

<div class="canvas-options">
            <zoomable-canvas id="canvas-img" ondrop="drop($event)"
                [image]="image"
                (topChange)="top = $event" (bottomChange)="bottom = $event" 
                (leftChange)="left = $event" (rightChange)="right = $event"
                [(centerX)]="centerX" [(centerY)]="centerY"
                [(zoomLevel)]="zoomLevel" [maxZoom]="maxZoom" [minZoom]="0"
                (canvasWidthChange)="canvasWidth = $event" (canvasHeightChange)="canvasHeight = $event">
            </zoomable-canvas>
        </div>

        <ion-row>
            <ion-col *ngFor="let btn of elements">                
                <button class="drag-button btn{{ btn.id }}"  draggable="true" (click)="duplicate($event, btn)" [style.background-color]="btn.kleur">
                    {{ btn.artikelnummer }}
                </button>
            </ion-col>
        </ion-row>

home.ts

duplicate(event, btn){

        /**
         * Get the current element by click
         */
        let value = event.srcElement['attributes']['class']['value'];

        // Split it
        let split = value.split(" ");
        let use = split[1];
        console.log(use);

        /**
         * Clone the item and prepare it to been draggable
         */
        let html = '<button class="drag-button btn'+btn.id+'" draggable="true" (click)="show($event)" [style.background-color]="btn.kleur">'+btn.artikelnummer+'</button>';

        //$('.canvas-options').append(html);
        $('.'+use).clone().appendTo('.canvas-options');

     }


     drop(event){
        event.preventDefault();
        var data = event.dataTransfer.getData('text');
        event.target.appendChild(document.getElementById(data));
     }

Here is a screenshot to see the current example in action:

Thanks in advance