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
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 :)
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.
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?
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 :)