DragDrop - DragEnter/DragLeave Events keep firing

Question

I have a drag/drop operation on a Canvas that is supposed to do something when an object gets dragged into and out of it. My problem is that the DragEnter/DragLeave events keeps firing as the mouse moves the object over it, not just on enter/exit. The faster the mouse is moving, the more frequently the events fire.

The Canvas DragOver Event moves the Canvas.Top/Left of the DraggedObject and I think that might be my problem, but I am not sure how I would fix this.

Answer 1

Here is the sequence of events:

1. Your mouse moves from where you clicked it across the Panel. No events fire.
2. Your mouse reaches the edge of the Panel and enters the Canvas. The DragEnter event fires on the Canvas.
3. Your DragEnter handler moves the Panel so that it is now under the mouse. Since the mouse is no longer over the Canvas (it is over the Panel), the DragLeave event fires.
4. Your mouse moves further, reaching the edge of the Panel again. Steps 2 and 3 repeat.

The faster you move the mouse, the more events you will receive.

The essence of your problem is that drag-drop uses hit testing, and by moving your panel you are defeating the ability of hit testing to see "behind" your panel to know what container it is being dropped in.

The solution is to use your own code for drag and drop handling, which is really not difficult at all. WPF's hit testing engine is powerful enough to do hit-testing behind the current object but drag-drop doesn't make use of this functionality. You can use it directly however by using the VisualTreeHelper.HitTest overload that takes a HitTestFilterCallback and a HitTestResultCallback. Just pass it a filter that ignores any hits within the panel being dragged.

I've found that for scenarios like you describe, doing drag-drop by handling mouse events is actually easier than using the built in DoDragDrop because you don't have to deal with the complexity (DataObject, DragDropEffects, QueryContinueDrag, etc). This additional complexity is very important for enabling scenarios of dragging between applications and processes, but does not help you for what you are doing.

Here's the simple solution:

1. On MouseDown with left button down, record the position (on MouseLeave erase the position)
2. On MouseMove with {left button down, position recorded, current mouse position differs by more than delta} set a flag saying drag operation is in progress & capture the mouse
3. On MouseMove with drag operation in progress, use hit testing to determine where your panel should be (ignoring the panel itself) and adjust its parenting and position accordingly.
4. On MouseUp with drag operation in progress, release the mouse capture and clear the "drag operation is in progress" flag

Enjoy.

Answer 2

This is a little bit old, but I had the same issue. I was using an adorner to indicate where a dragged-thing was being dragged to. I would enable the adorner in DragEnter, then immediately register a DragLeave and disable the adorner, then a DragEnter...

IsEnabled = false didn't work for me, but IsHitTestVisible = false did. I put this in the constructor of my adorner, and now it all works beautifully:

public DragDropAdorner(UIElement adornedElement) : base(adornedElement)
{
    _layer = AdornerLayer.GetAdornerLayer(AdornedElement);
    _layer.IsEnabled = false;
    _layer.IsHitTestVisible = false;
}

Answer 3

I find it necessary to add a more accurate answer to what is happening, I will add that same answer in other questions related to this issue as well.

Ok, this is what happening:

1. You create a drag-drop operation.
2. While you drag-drop you want something visual to show along your mouse.
3. That visual element is being add to a grid or panel on Drag-Enter event and being remove on Drag-Leave event.
4. When it is being placed under the mouse you will get a drag-leave event as the element you drawing actually steals the drag-drop operation..

Solution: Make sure that IsEnabled=false for the element you draw under the mouse.
That way it will not capture you drag-drop operation and you will not get flickering effect.

Answer 4

I had a similar issue and the magic that fixed it was e.Handled = true;

I wanted to select a TabItem when something was dragged over it. This is my solution.

In a resource dictionary define:

<Style TargetType="TabItem">
    <Setter Property="AllowDrop" Value="True" />
    <EventSetter Event="DragEnter" Handler="tabDragEnter" />
    <EventSetter Event="DragOver" Handler="tabDragOver" />
</Style>

Then the tabDragEnter handler:

private void tabDragEnter(object sender, DragEventArgs e)
    {            
        TabItem m_TabItem = sender as TabItem;
        m_TabItem.IsSelected = true;
    }

and lastly the tabDragOver handler:

private void tabDragOver(object sender, DragEventArgs e)
    {
        e.Effects = DragDropEffects.None;
        e.Handled = true;
    }

Answer 5

I had a similar issue recently, although it was in an Angular 6 framework, using reactive forms. This is how I solved it for my situation:

Basically and briefly, I turned off change detection on that component while dragging was taking place.

1. import ChangeDetectorRef:

    import { ChangeDetectorRef } from '@angular/core';

2. inject it into the constructor:

    constructor(private chngDetRef: ChangeDetectorRef) { //...

3. detach it on dragStart:

    private onDragStart(event, dragSource, dragIndex) {
        // ...
        this.chngDetRef.detach();
        // ...

4. reattach it on drop and dragEnd:

    private onDrop(event, dragSource, dragIndex) {
        // ...
        this.chngDetRef.reattach();
        // ...

    private onDragEnd(event, dragIndex) {
        // ...
        this.chngDetRef.reattach();
        // ...

If you have a lot of parent or layered components, you may have to do something about their change detection as well in order to see a substantial improvement.

Best of luck!