自定义拖放实现

Question

我正在推出自定义的拖放实现，它是Dragula库的简化版本。这是我的小提琴：

使用Dragula：http://jsfiddle.net/8m4jrfwn/

使用我的自定义拖放实现：http://jsfiddle.net/7wLtojs4/1/

我看到的问题是我的自定义拖放实现有点自由格式。我希望用户只能使用类框将其放在另一个div的顶部或底部。我怎样才能做到这一点？代码在这里：

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

我在此处看不到任何关于mouseup事件将发生的逻辑。似乎您需要在mouseup上检测元素的新顺序，然后交换它们的位置。

为此，您应该了解所有位置。在mouseup上，您可以根据新位置对其进行重新排序。

在我的实现（https://jsfiddle.net/jaromudr/c99oueg5/）中，我使用了下一个逻辑：

  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
    })
  }