Diagram: How to drag and drop the Item from panel bar to diagram

[hieu]

I want to create a diagram sample app in Vue like  https://demos.telerik.com/kendo-ui/html5-diagram-sample-app, but I do not find any sample about drag and drop the item between controls

Thanks,

[Dimitar]

Hello,

The referred example uses the Kendo Draggable to allow the items to be dragged and dropped inside the Diagram container. The original code is as follows:

$("#shapesPanelBar .shapeItem").kendoDraggable({
  hint: function() {
    return this.element.clone();
  }
});

$("#diagram").kendoDropTarget({
    drop: function(e) {
        var item, pos, transformed;
        if (e.draggable.hint) {
            item = e.draggable.hint.data("shape");
            pos = e.draggable.hintOffset;
            pos = new Point(pos.left, pos.top);
            var transformed = diagram.documentToModel(pos);
            item.x = transformed.x;
            item.y = transformed.y;

            diagram.addShape(item);
        }
    }
});

However, the Kendo UI for Vue wrappers currently do not provide a wrapper for the Draggable widget. Therefore, in order to achieve the same result, you could utilize the jQuery markup. A suitable place for executing the code would be the Vue mounted hook.

For additional information regarding the options of the Draggable, refer to the below API reference:

• Kendo Draggable.
  
  
• Kendo DropTarget.

Regards,
Dimitar
Progress Telerik

[hieu]

Thanks for you help.

I will try and get back you soon.