Constrain dragging to the x or y axis

3 posts, 0 answers
  1. Gareth
    Gareth avatar
    2 posts
    Member since:
    Mar 2012

    Posted 25 Apr 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 26 Apr 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Gareth
    Gareth avatar
    2 posts
    Member since:
    Mar 2012

    Posted 26 Apr 2012 Link to this post

    Thanks, I'll try that out.
Back to Top