More issues with Kendo UI drag and drop

[Jack]

Following http://www.telerik.com/forums/miscellaneous-issues-with-kendo-ui-drag-and-drop, I have tried doing it a different way (although I have yet no idea how I will implement resize en rotate using this track).

See Telerik dojo at http://dojo.telerik.com/Oqipe.

This dojo solves the issues in my previous thread but introduces 2 new issues:

1. When dropping the orange square, it shifts about 5px right and bottom. Any idea why since I copy the position of the hint?
2. When dropping the orange square close to any edge of the container, it reverts to its original position. Again, any idea why and how to sort it out?

Thx.

[Jack]

As far as using drag and drop on a resize and a rotate handle, using the hint seems to be a dead end. The hint seems really designed for moving elements.

[Petyo]

Hello Jacques,

I am not sure that I completely understand the remark about the resize and rotate handle, but I may suggest that you examine the internal implementation of (for example) the window resizing or the diagram rotation tools in the Kendo UI source code. Perhaps this will give you some clues. 

Back to your questions, you can avoid the shift by fixing the html, body margins and paddings - check an updated version of your example. The other issue you describe is due to the drop outside of the container - instead of using drop target drop event (which is not triggered), you may use the dragend event. 

Regards,
Petyo
Telerik

 

 

[Jack]

To understand the remark about the resize and rotate handles, please consider what I am trying to achieve at http://dojo.telerik.com/ecUWE.

The issue I have is "should I use the hint?" and although it is clear how to use it when translating an element, it is not clear how to use it when resizing and rotating, especially to ensure the element remains within the boundaries of a container.

As far as the examples you mention are concerned:

1. diagram rotation tools (kendo.dataviz.diagram.js) seem programmatic and apparently do not use drag and drop or Draggable. See also http://demos.telerik.com/kendo-ui/diagram/index. So there is not much to learn here except formulas for rotating.
2. window resizing, besides not implementing rotation, does not use the hint. See kendo.window.js line 1237:

that._draggable = new Draggable(wnd.wrapper, {
filter: ">" + KWINDOWRESIZEHANDLES,
group: wnd.wrapper.id + "-resizing",
dragstart: proxy(that.dragstart, that),
drag: proxy(that.drag, that),
dragend: proxy(that.dragend, that)
});

My impression is that the hint cannot be used when resizing and rotating. In this case, you are very much on your own. Please confirm.

[Petyo]

Hello Jacques,

Of course, using the hint is a matter of personal preference. In case you find its behavior too restrictive or unsuitable for your purposes, you can implement the necessary behavior without it.  

Regards,
Petyo
Telerik