How to stop dragend's default behavior in drag and drop?

To stop dragend's default behavior in drag and drop operations, you need to use preventDefault() and detect if the mouse is over a valid drop target. Here are several approaches to handle this properly.

Using preventDefault() Method

The most straightforward way is to call preventDefault() in the dragend event handler:

<div id="dragItem" draggable="true">Drag me</div>
<div id="dropZone">Drop here</div>

<script>
const dragItem = document.getElementById('dragItem');
const dropZone = document.getElementById('dropZone');

dragItem.addEventListener('dragend', function(event) {
    event.preventDefault();
    console.log('Dragend default behavior prevented');
});

dragItem.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text/plain', event.target.id);
});

dropZone.addEventListener('dragover', function(event) {
    event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData('text/plain');
    const draggedElement = document.getElementById(data);
    dropZone.appendChild(draggedElement);
});
</script>

Conditional Prevention Based on Drop Target

You can conditionally prevent the default behavior only when the element is over a valid drop target:

<div id="dragItem2" draggable="true">Drag me</div>
<div id="validDropZone">Valid drop zone</div>
<div id="invalidArea">Invalid area</div>

<script>
const dragItem2 = document.getElementById('dragItem2');
const validDropZone = document.getElementById('validDropZone');
let isOverValidTarget = false;

validDropZone.addEventListener('dragenter', function() {
    isOverValidTarget = true;
});

validDropZone.addEventListener('dragleave', function() {
    isOverValidTarget = false;
});

dragItem2.addEventListener('dragend', function(event) {
    if (isOverValidTarget) {
        event.preventDefault();
        console.log('Prevented default behavior over valid target');
    } else {
        console.log('Default behavior allowed - not over valid target');
    }
});
</script>

Using jQuery Approach

If you're using jQuery, you can check if the mouse is hovering over specific elements:

$(document).ready(function() {
    $('#myDragItem').on('dragend', function(event) {
        if ($('#myDropZone:hover').length) {
            event.preventDefault();
            console.log('Prevented - mouse over drop zone');
        }
    });
    
    $('#myDropZone').on('dragover', function(event) {
        event.preventDefault();
    });
    
    $('#myDropZone').on('drop', function(event) {
        event.preventDefault();
        // Handle drop logic here
    });
});

Complete Working Example

<style>
.drag-item {
    padding: 10px;
    background: lightblue;
    margin: 5px;
    cursor: move;
}
.drop-zone {
    padding: 20px;
    background: lightgray;
    border: 2px dashed #ccc;
    min-height: 100px;
}
.drop-zone.drag-over {
    background: lightyellow;
    border-color: orange;
}
</style>

<div class="drag-item" draggable="true" id="item1">Item 1</div>
<div class="drag-item" draggable="true" id="item2">Item 2</div>
<div class="drop-zone" id="dropArea">Drop items here</div>

<script>
let draggedElement = null;
let isOverDropZone = false;

document.querySelectorAll('.drag-item').forEach(item => {
    item.addEventListener('dragstart', function(event) {
        draggedElement = this;
        event.dataTransfer.setData('text/plain', '');
    });
    
    item.addEventListener('dragend', function(event) {
        if (isOverDropZone) {
            event.preventDefault();
            console.log('Dragend prevented - valid drop completed');
        }
        draggedElement = null;
        isOverDropZone = false;
    });
});

const dropZone = document.getElementById('dropArea');

dropZone.addEventListener('dragover', function(event) {
    event.preventDefault();
    isOverDropZone = true;
    this.classList.add('drag-over');
});

dropZone.addEventListener('dragleave', function() {
    isOverDropZone = false;
    this.classList.remove('drag-over');
});

dropZone.addEventListener('drop', function(event) {
    event.preventDefault();
    this.classList.remove('drag-over');
    
    if (draggedElement) {
        this.appendChild(draggedElement);
        console.log('Item dropped successfully');
    }
});
</script>

Key Points

• Use event.preventDefault() in the dragend handler to stop default behavior
• Track whether the dragged element is over a valid drop target using dragenter/dragleave events
• Always call preventDefault() in dragover and drop handlers for proper functionality
• Consider using flags or state variables to conditionally prevent default behavior

Conclusion

Preventing dragend's default behavior requires calling preventDefault() and tracking the drag state. Use conditional logic to only prevent defaults when over valid drop targets for better user experience.