Miscellaneous issues with Kendo UI drag and drop

[Jack]

My goal is to create a drawing surface (container) with DIVs containing HTML, where such DIVs have handles (draggable) to move, resize and rotate them.

At this stage my questions pertain to the prototype at http://dojo.telerik.com/isatE.

In Chrome, Firefox, IE and Safari (latest versions on Windows 8.1 with all updates), a shadow of the draggable square flickers at the top left corner of the container when dragging the square forth and back. To reproduce simply drag the square around the container for sufficient time. Apparently, (e.offsetX, e.offsetY) sometimes returns (0, 0) for a reason I cannot explain.

Looking at the console (it might be a different problem), there is an error originating from kendo.all.min.js.
Chrome displays: "Uncaught TypeError: undefined is not a function"
IE displays: "SCRIPT438: Object doesn't support property or method 'offset'"
Firefox displays: "TypeError: e[t] is not a function"
Safari displays "TypeError: 'undefined' is not a function (evaluating 'e[n]()')"

Please help:

1. Get rid of the flickering;
2. Get rid of console error messages;
3. Validate our code considering we cannot use a hint (rotate and resize planned for next step).

[Jack]

Although it is not (yet) working properly, what I am trying to achieve is prototyped at http://dojo.telerik.com/oCamA.

[Petyo]

Hello Jacques,

the error you experience is due to the hint configuration option missing, while the container is specified. The draggable widget needs to calculate the hint dimensions in order to constrain the hint to the specified container. I may suggest that you re-design your implementation with the hint in it, and base your calculations on its position - your current approach reads the event mouse coordinates, which are not affected by the constraints. 

 

Regards,
Petyo
Telerik