Element disappears when attempting drop away from the drop target

[Lior]

Hello,

I wrote a little demo that has two divs, one contains draggable buttons and the other is the drop target.
I can drag buttons into the drop target just fine, and the drop target itself is also draggable so I can move the buttons around inside the drop target. 

This works, but when I try to drag a button from the dropTarget div to some other place on the page, instead of just failing to drop it there (on a non-droppable section), the button disappears from the drop target div.

This is the code, I'd appreciate if someone could tell me why this happens and if it can be avoided:

<div id="draggable" style="background-color: lightgrey; height: 60px">

Drag the buttons to the yellow section<br/>

    <button >Button 1</button>

        <button >Button 2</button>

        <button >Button 3</button>

</div>

<div id="dropTarget" style="background-color: yellow; height: 60px">

</div>​

var draggable = $("#draggable").kendoDraggable({

    filter: 'button',

    hint: function(item) {

        return $(item).clone();

    }

});

var dropTarget = $("#dropTarget").kendoDropTarget({

    dragAndDrop: true,

    drop: droptargetOnDrop

}).kendoDraggable({

    filter: 'button',

    hint: function(item) {

        return $(item);

    }

});

  

  

function droptargetOnDrop(e) {

  //  console.log("drop called");

    var $target = $(e.target);

    $(e.draggable.hint).clone().appendTo(e.dropTarget)

}

Thanks