Making a div draggable to a new position and stay there

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/