Recientemente me enfrenté a un problema extraño al usar el paquete https://github.com/Shopify/draggable . Así que aquí está el problema, estoy usando estímulo js en la aplicación Rails, y en uno de los controladores de estímulo que tengo:

 export default class extends ApplicationController { updateElementPosition(target) { let positions = target.querySelectorAll('input[name="position"]'); positions.forEach(positionInput => { const index = this.index(positionInput.closest('[element]')) positionInput.value = index }) } .... in one function registerEvent() { sortable.on('drag:stopped', function(event) { let oldStep = $(event.sourceContainer).parents('[step]')[0] let newStep = $(event.originalSource).parents('[step]')[0] if (oldStep == newStep) { this.updateElementPosition(newStep) } else { this.updateElementPosition(oldStep) this.updateElementPosition(newStep) } }.bind(this)) } }

Básicamente, quiero actualizar el valor de entrada de la posición de un elemento cada vez que un elemento se arrastra a una posición diferente dentro de un contenedor arrastrable.

Problema: cuando uso el depurador en updateElementPosition y ejecuto cada línea por línea, el valor de positionInput se establece correctamente, pero cuando lo ejecuto tal como está, no establece positionInput con el valor de índice.