Kendo UI move draggable on drop

Posted by Famke Bergmans on 01-Mar-2016 06:44

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);
    }
});

 

Greetings,
Famke

Posted by Famke Bergmans on 02-Mar-2016 06:50

I managed to fix the problem.

I didn't use your solution, though. I suddenly figured: why not use prependTo? So I made a div around the dropTarget, prepended the draggable to it and gave it additional styling, like this:

$("#tireSwitchFirst").kendoDropTarget({
    drop:function(e){
        $(".draggableTire").removeClass("dragTire");
        $("#tireSwitchSec").show();
        var v_newPos = $("#tireSwitchFirst").position();
        
$(e.draggable.element[0]).css({"top" : v_newPos.top + "px", "margin-left" : "5px", "left" : "auto", "right" : "auto"});
        
$(e.draggable.element[0]).prependTo("#switchPlaceFirst");
    }
});

Thanks for the help anyway, I will definitely keep that resizing-event in mind :)

All Replies

Posted by Thierry Ciot on 01-Mar-2016 18:50

In new ui, you can leverage the custom event rb.newui.util.customEvents.rbs_uiResized  and re-apply the computed offset in the callback.

               $(document).on( rb.newui.util.customEvents.rbs_uiResized, function() {

                             // reapply offset to the element here …

               });

This event is triggered once the main container is resized (by container we mean where the RB inner page is rendered – inner page as in what you design in page designer – we sometime call it the canvas).

Also, you are passed the computed height of the canvas in the data object.

Hope this helps.

Thierry.

Posted by Famke Bergmans on 02-Mar-2016 04:14

Thanks for the response! I'm not sure how I can reapply the offset, though. From within this function, how can I access all the dropped elements and what do I do when I have them?

What do you mean by 'passed the computer height of the canvas'? Is that a problem?

Posted by Famke Bergmans on 02-Mar-2016 06:50

I managed to fix the problem.

I didn't use your solution, though. I suddenly figured: why not use prependTo? So I made a div around the dropTarget, prepended the draggable to it and gave it additional styling, like this:

$("#tireSwitchFirst").kendoDropTarget({
    drop:function(e){
        $(".draggableTire").removeClass("dragTire");
        $("#tireSwitchSec").show();
        var v_newPos = $("#tireSwitchFirst").position();
        
$(e.draggable.element[0]).css({"top" : v_newPos.top + "px", "margin-left" : "5px", "left" : "auto", "right" : "auto"});
        
$(e.draggable.element[0]).prependTo("#switchPlaceFirst");
    }
});

Thanks for the help anyway, I will definitely keep that resizing-event in mind :)

Posted by Thierry Ciot on 02-Mar-2016 09:42
In new ui, you can leverage the custom event rb.newui.util.customEvents.rbs_uiResized  and re-apply the computed offset in the callback.
 
                $(document).on( rb.newui.util.customEvents.rbs_uiResized, function() {
                              // reapply offset to the element here …
                });
 
This event is triggered once the main container is resized (by container we mean where the RB inner page is rendered – inner page as in what you design in page designer – we sometime call it the canvas).
Also, you are passed the computed height of the canvas in the data object.
 
This thread is closed