CODEWITHSUNDEEP
javascriptreactjsecmascript-6mouseleave
Benvorth
Benvorth

Reputation: 7722

Update onMouseLeave event

In JavaScript I re-order an element of a list if the mouseLeave `s it:

enter image description here

This works fine for the first leave-event. However the next time(s) the mouse leaves the element the leave-event is not triggered reliable.

My code is basically this (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>
  )
}

Upvotes: 0

Views: 74

Answers (1)

Arnau
Arnau

Reputation: 76

After the first leave-event you should call again onMouseDownOnListItem event in order to wait for another addEventListener.

Upvotes: 0

Related Questions