Drag and Drop support in Syncfusion® ASP.NET Core controls

8 Dec 20246 minutes to read

  • Drag and Drop support can be enabled for Syncfusion® ASP.NET Core controls by setting allowDragAndDrop property to true. It allows to drag and drop the specific elements in the Syncfusion® ASP.NET Core controls.

  • Drag and Drop is supported through two libraries of Essential® JS 2. Those are Draggable and Droppable. Draggable makes DOM to be dragged using mouse or touch gestures and Droppable mark required DOM as droppable zone.

Drag and Drop Supported controls

The following list demonstrates the Syncfusion® ASP.NET Core control documents that are supported with Drag and Drop.

Initializing custom Draggable element

You can make any element draggable by passing the element to Draggable constructor.

<div id="drag-element"><p>Draggable Element </p></div>
    
<script>
    var dragElement = document.getElementById('drag-element');
    var draggable = new ej.base.Draggable(dragElement,{clone: false});
</script>

<style>
    #drag-element {
        height: 100px;
        width: 150px;
        border: 1px solid #cecece;
        cursor: move;
        user-select: none;
        color: #6a77a7;
        touch-action: none;
    }

    p {
        padding-top: 20px;
        text-align: center;
        margin: 14px 0px 14px 0px;
    }
</style>

draggable element

Creating Droppable zone

You can convert any DOM element as a droppable zone, which accepts the draggable elements.

<div id="droppable">
    <p class="drop">
    <span>Drop Target</span> 
    </p>
</div>    

<script>
    var droppable = new ej.base.Droppable(document.getElementById('droppable'));
</script>

<style>
    #droppable {
        margin: 5px;
        line-height: 170px;
        font-size: 14px;
        width: 250px;
        border: 1px solid #cecece;
        background: #f6f6f6;
        touch-action: none;
    }
    
    .drop {
        padding-top: 23px;
        text-align: center;
        margin: 14px 0px 14px 0px;
    }
</style>

droppable area

Defining Drop Action

To define drop action set drop callback function during droppable object creation. You can get details of dropped element through dropped element property in event argument.

<div id="droppable"><p class="drop"><span>Drop Target </span></p></div>
<div id="drag-element"><p class="drag-text">Drag </p></div>

<script>
    var draggable = new ej.base.Draggable(document.getElementById('drag-element'), {clone: false});
    var droppable = new ej.base.Droppable(document.getElementById('droppable'), {
        drop: (function (e) {
        e.droppedElement.querySelector('.drag-text').textContent = 'Dropped';
        })
    });
</script>

<style>
    #drag-element {
        height: 100px;
        width: 150px;
        border: 1px solid #cecece;
        cursor: move;
        background: #cdffe3;
        user-select: none;
        touch-action: none;
    }
        
    #droppable {
        margin: 5px;
        line-height: 170px;
        font-size: 14px;
        width: 250px;
        border: 1px solid #cecece;
        background: #f6f6f6;
        touch-action: none;
    }
        
    .drop,.drag-text {
        padding-top: 23px;
        text-align: center;
        margin: 14px 0px 14px 0px;
    }
</style>

drag and drop element

NOTE

View sample in GitHub

See also