Custom drag drop implementation

Question

I am rolling out a custom drag drop implementation which is a simplified version of the Dragula library. Here are my fiddles:

With Dragula: http://jsfiddle.net/8m4jrfwn/

With my custom drag drop implementation: http://jsfiddle.net/7wLtojs4/1/

The issue I am seeing is that my custom drag and drop implementation is a bit to free-form. I would like for the user to only be able to drop on the top or bottom of another div with the class box. How can I make this possible? Code here:

function handleMouseDown(e) {
  window.dragging = {};
  dragging.pageX = e.pageX;
  dragging.pageY = e.pageY;
  dragging.elem = this;
  dragging.offset = $(this).offset();

  $('body')
    .on('mouseup', handleMouseUp)
    .on('mousemove', handleDragging);
}

function handleDragging(e) {
  let left = dragging.offset.left + (e.pageX - dragging.pageX);
  let top = dragging.offset.top + (e.pageY - dragging.pageY);
  $(dragging.elem)
    .offset({top: top, left: left});
}

function handleMouseUp() {
  $('body')
    .off('mousemove', handleDragging)
    .off('mouseup', handleMouseUp);
}

let boxElement = '.item';

$(boxElement).mousedown(handleMouseDown);

Answer 1

I does not see any logic here about what will happen on mouseup event. Seems you need detect on mouseup new order of elements and then exchange their positions.

For this you should know positions of all of them. On mouseup you can reorder them based on new positions.

In my realization( https://jsfiddle.net/jaromudr/c99oueg5/ ) I used next logic:

  onMove(draggable) {
    const sortedDraggables = this.getSortedDraggables()
    const pinnedPositions = sortedDraggables.map((draggable) => draggable.pinnedPosition)

    const currentIndex = sortedDraggables.indexOf(draggable)
    const targetIndex = indexOfNearestPoint(pinnedPositions, draggable.position, this.options.radius, getYDifference)

    if (targetIndex !== -1 && currentIndex !== targetIndex) {
      arrayMove(sortedDraggables, currentIndex, targetIndex)
      this.bubling(sortedDraggables, draggable)
    }
  }

  bubling(sortedDraggables, currentDraggable) {
    const currentPosition = this.startPosition.clone()

    sortedDraggables.forEach((draggable) => {
      if (!draggable.pinnedPosition.compare(currentPosition)) {
        if (draggable === currentDraggable && !currentDraggable.nativeDragAndDrop) {
          draggable.pinnedPosition = currentPosition.clone()
        } else {
          draggable.pinPosition(currentPosition, (draggable === currentDraggable) ? 0 : this.options.timeExcange)
        }
      }

      currentPosition.y = currentPosition.y + draggable.getSize().y + this.verticalGap
    })
  }

where on move we detect if position in list was changed and move other draggables to their new positions.

On drag end we just move currentDraggable to pinnedPosition