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

Cancelling drag operation

1 Answer 178 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Pavel
Top achievements
Rank 1
Pavel asked on 15 Mar 2021, 08:20 AM

Hi,

i would like to move items with mouse and be able to cancel this operation with Esc key - cancel drag operation and move dragged item(s) back. How to do it correctly? I'm using MVVM patter if it does matter...

Thank you

Pavel

1 Answer, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 18 Mar 2021, 07:48 AM

Hello Pavel,

There is no built-in functionality doing this, but you can customize the drag operations inside the diagram using its DraggingService.   You can use the StartDragging event of the dragging service in order to save the original position of the shape and then in the KeyDown event handler of RadDIagram, you can stop the dragging action and restore original position of the shape in case Esc was pressed. For example:

private Point dragOrigin;
private DraggingService draggingService;

public MainWindow()
{
	InitializeComponent();
	this.draggingService = this.diagram.ServiceLocator.GetService<IDraggingService>() as DraggingService;
	this.draggingService.StartDragging += DraggingService_StartDragging;
	this.diagram.AddHandler(KeyDownEvent, new KeyEventHandler(RadDiagram_KeyDown), true);
}

private void RadDiagram_KeyDown(object sender, KeyEventArgs e)
{
	if (Keyboard.IsKeyDown(Key.Escape) && this.draggingService.IsDragging)
	{
		var draggedShape = draggingService.DraggingModels.ElementAt(0);
		this.draggingService.CompleteDrag();
		this.draggedShape.Position = dragOrigin;                
	}
}

private void DraggingService_StartDragging(object sender, CancelingPositionChangedEventArgs e)
{
	this.dragOrigin = e.StartMousePosition;
}

Regards,
Martin Ivanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Diagram
Asked by
Pavel
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question
or