Kendo UI move draggable on drop

[Mani]

Hi there,

I'm working in Rollbase using Kendo UI. I'm currently making a drag  drop with the Kendo UI Drag & Drop functionality. It works well, except I want the draggable element to stay visible when it gets dragged onto the dropTarget. I made that work using offset, but when I zoom the screen in or out, the dropTarget moves while the draggable stays untouched.

Does anybody know a way in which I can make my draggable stick to the dropTarget?

Here's some code:

$(".draggableTire").hover(function(){
    $(".draggableTire").removeClass("dragTire");
    $(this).addClass("dragTire");
    $(".dragTire").kendoDraggable({
        holdToDrag:true,
        hold:function(e){
            $(".dragTire").css({"border":"1px solid orange","border-radius":"10px"});
        },
        hint:function(e){
            return e.clone();
        },
        dragend:function(e){
            $(".dragTire").css({"border":"0px","border-radius":"0px"});
        },
        autoScroll:true,
      });
});

$("#tireWasteFirst").kendoDropTarget({
    drop:function(e){
        $(e.draggable.element[0]).offset({
            top:e.sender.targetElement.y,
            left:e.sender.targetElement.x
        });
        $("#tireWasteSec").show();
        formActions(e.draggable.element[0].id);
    }
});

[Petyo]

Hello,

the approach should work in general. You may also consider actually moving the DOM element of the draggable into the drop target one.

Regards,
Petyo
Telerik