Kendo UI Mobile base

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div id="draggable">
    Foo
</div>

<div class="droppable" id="drop1">
    Bar
    <div class="droppable" id="drop2">Baz</div>
</div>

CSS

div {
    padding: 20px;
    border: 1px solid black;
}
#draggable {
    float: left;
}

.droppable {
    float: right;
}

JavaScript

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

   
$("#drop2").kendoDropTarget({
    dragenter: function(e) { console.log("dragenter", e.sender.element.attr("id")) },
    dragleave: function(e) { console.log("dragleave", e.sender.element.attr("id")) }
})

        
$("#drop1").kendoDropTarget({
    dragenter: function(e) { console.log("dragenter", e.sender.element.attr("id")) },
    dragleave: function(e) { console.log("dragleave", e.sender.element.attr("id")) }
});