drag drop events

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<span id='draggable'>Drag me</span>

<br/>
<br/>
<br/>
<br/>
<br/>
<div id='container' class='entire' style='height:400px;width:500px;border:1px solid;'> <span>hello1</span>
 <span>hello2</span>

    <br/>
    <br/>
    <br/>
    <br/> <span>hello3</span>
 <span>hello4</span>
 <span>hello5</span>
 <span>hello6</span>

</div>

JavaScript

$('#draggable').kendoDraggable({
    hint: function () {
        return $("#draggable").clone();
    }
});

var $cont = $('#container');

$cont.kendoDropTargetArea({
    filter: ".entire span, .entire",
    dragenter: function (e) {
        alert('enter', e.dropTarget[0]);
    },
    dragleave: function (e) {
       alert('leave ', e.dropTarget[0]);
    }
});