更新onMouseLeave事件

Question

在JavaScript中，如果mouseLeave是它的话，我会重新排序列表的元素：

这适用于第一次离开事件。但是，下一次（s）鼠标离开元素时，事件的触发事件不会被触发。

我的代码基本上就是这个（ES6 with reactJS）：

onMouseDownOnListItem (index, event) {
  this.draggedElementIndex = index
  this.initialDragPos_Y = event.pageY
  const listItem = this.refs[('ListItem_' + index)].getDOMNode() 
  listItem.addEventListener('mouseleave', this.onMouseLeaveOnListItem)
},

onMouseLeaveOnListItem (event) {
  const delta = event.pageY - this.initialDragPos_Y
  if (delta !== 0) {
    let {elements} = this.state
    let element = elements[this.draggedElementIndex]
    let oldPos = this.draggedElementIndex
    let newPos = -1
    if (delta < 0) { // move element up
      newPos = this.draggedElementIndex - 1
    } else if (delta > 0) { // move element down
      newPos = this.draggedElementIndex + 1
    }

    if (newPos >= 0 && newPos < elements.length) {
      // move element in elements-array
      elements.splice(oldPos, 1) // remove 1 element at oldPos
      elements.splice(newPos, 0, element) // at newPos, delete 0, add element

      this.draggedElementIndex = newPos
      this.initialDragPos_Y = event.pageY
      this.setState({
        elements: elements
      })
    }
  }
},

render () {
  const {elements} = this.state
  let content = []
  elements.map((element, index) => {
    let boundMouseDown = this.onMouseDownOnListItem.bind(this, index)
    content.push(
      <div ref={'ListItem_' + index} onMouseDown={boundMouseDown}>{element} </div>
    )
  })
  return (
    <div ref={'myList'}>
      {content}
    </div>
  )
}

Answer 1

在第一个leave-event之后，你应该再次调用onMouseDownOnListItem事件，以便等待另一个addEventListener。