Auto Scroll In kendoDraggable

Gowtham K
8y
2.7k
0
0

Blog

kendoDraggable allows the DOM element to move around HTML body using mouse, or finger for touch device. This blog elaborates how to implement the kendoDraggable with the auto scroll option.

In certain scenario, if the target and source element is far away with the scrolling, the auto scroll option will be helpful to achieve our goal.

Please read my previous blog where I have explained how to implement the kendoDraggable in our HTML page, with basic example.

Code

<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="draggable"></div>
<div id="droptarget" class="k-header">Drag the small circle here.</div>
</div>
<script>
function draggableOnDragStart(e) {
$("#draggable").addClass("hollow");
$("#droptarget").text("Drop here.");
$("#droptarget").removeClass("painted");
}
function droptargetOnDragEnter(e) {
$("#droptarget").text("Now drop...");
$("#droptarget").addClass("painted");
}
function droptargetOnDragLeave(e) {
$("#droptarget").text("Drop here.");
$("#droptarget").removeClass("painted");
}
function droptargetOnDrop(e) {
$("#droptarget").text("You did great!");
$("#draggable").removeClass("hollow");
}
function draggableOnDragEnd(e) {
var draggable = $("#draggable");
if (!draggable.data("kendoDraggable").dropped) {
// drag ended outside of any droptarget
$("#droptarget").text("Try again!");
}
draggable.removeClass("hollow");
}
$(document).ready(function() {
$("#draggable").kendoDraggable({
hint: function() {
return $("#draggable").clone();
},
dragstart: draggableOnDragStart,
dragend: draggableOnDragEnd,
autoScroll:true
});
$("#droptarget").kendoDropTarget({
dragenter: droptargetOnDragEnter,
dragleave: droptargetOnDragLeave,
drop: droptargetOnDrop
});
var draggable = $("#draggable").data("kendoDraggable");
});
</script>
<style>
#draggable {
cursor: move;
position: absolute;
top: 260px;
left: 50%;
margin-left: -28px;
width: 56px;
height: 56px;
border-radius: 50%;
background-color: #03a9f4;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
.painted {
background-color: #03a9f4;
color: #fff;
}
#draggable.hollow
{
cursor: default;
background: #ececec;
}
#droptarget
{
height: 200px;
width: 200px;
font-size: 14px;
border-radius: 50%;
text-align: center;
line-height: 200px;
margin: 0 auto;
cursor: default;
border: 1px solid #999;
}
.demo-section
{
height: 200px;
position: relative;
overflow:auto;
}
</style>
</div>
</body>
</html>

The above code clearly says that the auto-scroll property of the kendoDraggable should be enabled to implement the auto scroll while doing drag and drop in our application.