Kendo UI move draggable on drop

2 posts, 0 answers
  1. Mani
    Mani avatar
    1 posts
    Member since:
    Mar 2016

    Posted 01 Mar Link to this post

    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);
        }
    });
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 03 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top