This is a migrated thread and some comments may be shown as answers.

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

2 Answers 51 Views
This is a migrated thread and some comments may be shown as answers.
hieu
Top achievements
Rank 1
hieu asked on 23 Apr 2019, 03:27 PM

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,

2 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 25 Apr 2019, 10:51 AM
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:


Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
hieu
Top achievements
Rank 1
answered on 25 Apr 2019, 02:28 PM

Thanks for you help.

I will try and get back you soon.

Asked by
hieu
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
hieu
Top achievements
Rank 1
Share this question
or