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