Making a div draggable to a new position and stay there - draggable

Question

This is a newbie question about Kendo UI draggable. I tried to look at their examples but cant really get it.
I want to make a div draggable to another position. When setting this up I can drag the div, but it disappears when released, I want it to stay in the new place. I have tried this but it doesnt work.
$('.draggable').kendoDraggable({
axis: "x",
hint: Hint,
dragstart: DragStart,
drag: Drag,
dragend: DragEnd
});
function Hint (element) {
console.log("hint");
return element;
}
function DragStart(){
console.log("dragstart");
}
function Drag(){
console.log("draging");
}
function DragEnd(event) {
console.log("dragend");
console.log(event.x.location);
$('.draggable').css({'left': event.x.location});
}

Answer 1

I think this is what you want, and I made a Demo for it.
$('.draggable').kendoDraggable({
hint : function (original) {
return original.clone().addClass("ob-clone");
},
dragstart: function (e) {
$(e.target).addClass("ob-hide");
}
});
$('body').kendoDropTarget({
drop: function (e) {
var pos = $(".ob-clone").offset();
$(e.draggable.currentTarget)
.removeClass("ob-hide")
.offset(pos);
}
})
.draggable {
position: absolute;
background: red;
width: 100px;
height: 100px;
vertical-align: middle;
}
.ob-hide {
display: none;
}
.ob-clone {
background: #cccccc;
}
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">
<div class="draggable">
Drag 1
</div>
<div class="draggable">
Drag 2
</div>
</div>
jsFiddle: http://jsfiddle.net/Wayou/fjrcw/