Drag-and-Drop Overview
Kendo UI for jQuery provides options to handle drag-and-drop scenarios by combining the kendoDraggable and kendoDropTarget controls.
kendoDraggable enables the Draggable functionality and allows a DOM element to be moved by using the mouse or a finger on touch devices.
kendoDropTarget creates the droppable zones and marks a DOM element as a drop target for the Draggable. The DropTargetArea enables you to create multiple DropTarget elements that are located in the area container which is a useful scenario when the DropTarget elements are added dynamically.
The Drag and Drop is part of Kendo UI for jQuery, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Initializing the Drag-and-Drop
The following example demonstrates how to initialize the Draggable widget.
In order for the user to have a visual indication of the dragged item, specify the
hintconfiguration option.
<div id="draggable" style="width: 200px; height: 200px; background-color: #0ff;">drag me</div>
<script>
var draggable = $("#draggable").kendoDraggable({
hint: function(element) {
return element.clone();
}
});
</script>
The following example demonstrates how to initialize the DropTarget widget.
If the DropTarget element is initially empty, set the
heightormin-heightproperties of the element through CSS. The user will not be able to drag on targets with a zero height.
<div id="listB"></div>
<script>
$("#listB").kendoDropTarget();
</script>
<style>
#listB {
width: 300px;
height: 280px;
border: 3px solid black;
border-radius: 3px;
}
</style>
The following example demonstrates how to initialize DropTargetArea element.
Specify the
filteroption for the DropTargetArea.
<div id="area">
<div class="orange"></div>
<div class="purple"></div>
<div class="orange"></div>
<div class="purple"></div>
</div>
<div id="draggable"></div>
<script>
$("#draggable").kendoDraggable({
hint: function(element) {
return element.clone();
}
});
$("#area").kendoDropTargetArea({
filter: ".orange",
drop: onDrop
});
function onDrop(e) {
e.dropTarget.removeClass("orange").addClass("purple");
}
</script>
<style>
#draggable {
width: 50px;
height: 50px;
border: 2px solid green;
margin: 5px;
display: inline-block;
background-color: orange;
}
.orange, .purple {
width: 50px;
height: 50px;
margin: 10px;
display: inline-block;
}
.orange { background-color: orange; }
.purple { background-color: purple; }
#area {
width: 300px;
height: 300px;
background-color: gray;
}
#droptarget {
width: 100px;
height: 100px;
border: 2px solid green;
margin: 0 96px;
display: inline-block;
vertical-align: middle;
}
</style>