Drag and Drop support in Syncfusion ASP.NET Core controls
19 Dec 20226 minutes to read
-
Drag and Drop support can be enabled for Syncfusion ASP.NET Core controls by setting
allowDragAndDrop
property totrue
. 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
andDroppable
. 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>
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>
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>
NOTE