Constrain dragging to the x or y axis

[Gareth]

Hi all

Is it possible to constrain dragging to a particular x or y axis? Or, failing that, constrain it to a particular region? From the demo I can see that the drop area can be constrained, but it's the actual dragging (or its visualization) that I want to limit to a particular axis...

Thanks
G

[Dimo]

Hello Gareth,

You can use the drag event of the Kendo Draggable object, check the position of the mouse cursor (e.clientX, e.clientY) and reposition the drag hint (this.hint) manually. If you apply top and left styles directly, they will be overwritten immediately, that's why you need to use CSS classes with hard-coded coordinates and !important.

function draggableOnDrag(e) {
    if (true) //hint is too much to the right
    {
         this.hint.addClass("maxRight");
    }
    if (true) //hint is too much to the bottom
    {
         this.hint.addClass("maxBottom");
    }
}

.maxRight
{
     left: 400px !important;
}

.maxBottom
{
     top: 400px !important;
}

Using the above approach with 4 CSS classes (one for minLeft and one for minBottom) and applying one or two at a time, you can force the hint to remain within a certain area.

Greetings,
Dimo
the Telerik team

[Gareth]

Thanks, I'll try that out.