Premium forums

Constrain dragging to the x or y axis Cancel

• Gareth

  
  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
• Dimo

  
  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!
• Gareth

  
  26 Apr 2012 (Link to this post)

  Thanks, I'll try that out.