Dragging and sorting in both directions?

[jr69]

I've looked at the example sortable list and have managed to make it work horizontal, by having the divs display in inline-block, and then changing the "Draggable-XXX" file's cardTarget, hover() method, to have X variables instead of Y.

Is there a way to somehow make react-dnd detect both direction dragging? I am currently trying putting this:

// Dragging downwards if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) { return; } // Dragging upwards if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) { return; } // Dragging left if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) { return; } // Dragging right if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) { return; }

but to no avail, the dragging is really buggy, sometimes it won't even swap the elements, and I have to move the mouse around like crazy to get some registration/feedback

[OliverJAsh]

Here you go @jr69 OliverJAsh/react-dnd-sortable-simple@9ebcabe

[juampick]

What we did with our team is the following and it's working ok: (based on @OliverJAsh and the original, done some tweaks)

    // Get vertical middle
    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // Get horizontal middle
    const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;

    // Determine mouse position
    const clientOffset = monitor.getClientOffset();

    // Get pixels to the top
    const hoverClientY = clientOffset.y - hoverBoundingRect.top;

    // Get pixels to the left
    const hoverClientX = clientOffset.x - hoverBoundingRect.left;

    const upwards = dragIndex > hoverIndex && hoverClientY > hoverMiddleY;
    const downwards = dragIndex < hoverIndex && hoverClientY < hoverMiddleY;
    const leftwards = dragIndex > hoverIndex && hoverClientX > hoverMiddleX;
    const rightwards = dragIndex < hoverIndex && hoverClientX < hoverMiddleX;

    if (upwards && (leftwards || rightwards)){
      return;
    }

    if (downwards && (leftwards || rightwards)){
      return;
    }

Thanks to all!

Juan

[anztrax]

thanks @juampick , @OliverJAsh 👍

[Av1shay]

I've managed to make it work as expected, inspired by @OliverJAsh's commit:

// get hovered image vertical middle position
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

// get hovered image horizontal middle position
const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;

// determine mouse position
const clientOffset = monitor.getClientOffset();

// get pixels to the top
const hoverClientY = clientOffset.y - hoverBoundingRect.top;

// get pixels to the left
const hoverClientX = clientOffset.x - hoverBoundingRect.left;

// only perform the move when the mouse has crossed half of the items height/width
// are we dragging right or left?
const dragRight = dragIndex === (hoverIndex - 1);
const dragLeft = dragIndex === (hoverIndex + 1);

// are we dragging up or down?
const dragUp = dragBoundingRect.top > hoverBoundingRect.top;
const dragDown = dragBoundingRect.bottom < hoverBoundingRect.bottom;

if ( dragRight && dragIndex < hoverIndex && hoverClientX < hoverMiddleX ) {
  return;
}

if ( dragLeft && dragIndex > hoverIndex && hoverClientX > hoverMiddleX ) {
  return;
}

if ( dragUp && dragIndex > hoverIndex && hoverClientY > hoverMiddleY ) {
  return;
}

if ( dragDown && dragIndex < hoverIndex && hoverClientY < hoverMiddleY ) {
  return;
}

[tizzle]

@Av1shay,

thanks for your code, can you maybe explain where you get the dragBoundingRect from?

Cheers

[Av1shay]

@tizzle
Sure, this is the element currently being dragged:

const dragElement = document.getElementById(monitor.getItem().elementID);
const dragBoundingRect = dragElement.getBoundingClientRect();

You need to pass in beginDrag the dragged element id:

beginDrag(props) {
    return {
      elementID: props.elementID
    };
  }

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[getanwar]

I've managed to make it work as expected, inspired by @OliverJAsh's commit:

// get hovered image vertical middle position
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

// get hovered image horizontal middle position
const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;

// determine mouse position
const clientOffset = monitor.getClientOffset();

// get pixels to the top
const hoverClientY = clientOffset.y - hoverBoundingRect.top;

// get pixels to the left
const hoverClientX = clientOffset.x - hoverBoundingRect.left;

// only perform the move when the mouse has crossed half of the items height/width
// are we dragging right or left?
const dragRight = dragIndex === (hoverIndex - 1);
const dragLeft = dragIndex === (hoverIndex + 1);

// are we dragging up or down?
const dragUp = dragBoundingRect.top > hoverBoundingRect.top;
const dragDown = dragBoundingRect.bottom < hoverBoundingRect.bottom;

if ( dragRight && dragIndex < hoverIndex && hoverClientX < hoverMiddleX ) {
  return;
}

if ( dragLeft && dragIndex > hoverIndex && hoverClientX > hoverMiddleX ) {
  return;
}

if ( dragUp && dragIndex > hoverIndex && hoverClientY > hoverMiddleY ) {
  return;
}

if ( dragDown && dragIndex < hoverIndex && hoverClientY < hoverMiddleY ) {
  return;
}

This solution helped me a lot. You can drag and drop any direction without any hassle.

Also, to get dragBoundingRect directly in hover method without accessing the DOM you can return it from beginDrag method.

beginDrag(props, monitor, component) {
    // `getNode` comes from `useImperativeHandle` suggested by ReactDnD
    const node = component.getNode(); 
    const dragBoundingRect = node.getBoundingClientRect();

    return {
        // ....
        dragBoundingRect
    };
  }

Then easily retrieve it from monitor.getItem()