console
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="droptarget" class="k-header">Drag the small circle here.</div>
<div id="draggable"></div>
</div>
<div class="box wide">
<div class="box-col">
<h4>Axis</h4>
<ul class="options">
<li><select id="axis">
<option value="">(none)</option>
<option value="x">Horizontal (x)</option>
<option value="y">Vertical (y)</option>
</select>
</li>
</ul>
</div>
<div class="box-col">
<h4>cursorOffset</h4>
<ul class="options">
<li><label for="cursorOffset"><input type="checkbox" id="cursorOffset"> Enable <code>cursorOffset</code></label></li>
</ul>
</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) {
$("#droptarget").text("Try again!");
}
draggable.removeClass("hollow");
}
$(document).ready(function() {
$("#draggable").kendoDraggable({
hint: function() {
return $("#draggable").clone();
},
dragstart: draggableOnDragStart,
dragend: draggableOnDragEnd
});
$("#droptarget").kendoDropTarget({
dragenter: droptargetOnDragEnter,
dragleave: droptargetOnDragLeave,
drop: droptargetOnDrop
});
var draggable = $("#draggable").data("kendoDraggable");
$("#cursorOffset").click(function(e) {
if (this.checked) {
draggable.options.cursorOffset = { top: 10, left: 10 };
} else {
draggable.options.cursorOffset = null;
}
});
$("#axis").change(function(e) {
draggable.options.axis = $(this).val();
});
$("#axis").kendoDropDownList({
});
});
</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: 300px;
position: relative;
}
</style>
</div>
</body>
</html>