When using bounds, I expect ui.x and ui.y within bounds

[romainneutron]

This follow up #150

When creating a draggable with bounds, if your mouse pointer goes outside the bounds, the draggable element stays within the bounds.
However, using a event listener on onDrag like this below shows that the ui.x property is the one of the pointer, not the one of the draggable (ie : the ui.x continues to be updated even if I'm outside of the bounds)

    onDrag = (e, ui) => {
        console.log(ui.x);
    }

[otbe]

Definitely surprising for me too. Have to build some custom logic around to get the correct behavior.

[louh]

Same. I essentially have to do this:

onDrag = (e, ui) => {
  const boundingBox = this.refElement.getBoundingClientRect();
  let actualX = ui.x;
  let actualY = ui.y;

  if (ui.x < boundingBox.left) {
    actualX = boundingBox.left;
  } else if (ui.x > boundingBox.left + boundingBox.width) {
    actualX = boundingBox.left + boundingBox.width;
  }

  // Do the same for ui.y
  // return actualX and actualY for use, rather than the original `ui` object
}

[ioRekz]

Was surprise as well

[STRML]

Ref: #226

[STRML]

Fixed in 55f701e