Estoy usando draggabilly.js para hacer que un grupo de divs se pueda arrastrar. El problema que tengo es agregar una función dragend a cada div, para poder ver dónde está en ese punto final.
mi código es:
<script> // get all draggie elements var draggableElems = document.querySelectorAll('.draggable'); // array of Draggabillies var draggies = [] // init Draggabillies for ( var i=0, len = draggableElems.length; i < len; i++ ) { var draggableElem = draggableElems[i]; console.log('i: '+i); var draggie = new Draggabilly( draggableElem, { containment: true }); draggie.on('dragEnd', function() { console.log( 'draggie at TP ' + draggie.position.x + ', ' + draggie.position.y ); }); draggies.push( draggie ); } </script>El problema es que solo el último div en el ciclo for da los valores correctos en el comentario. En la consola veo:
draggie at TP 120, 73 draggie at TP 201, 72 draggie at TP 188, 29 draggie at TP 225, 44 draggie at TP 225, 44 draggie at TP 225, 44 draggie at TP 184, 50Los primeros 4 comentarios reflejan mover el último ítem a diferentes posiciones, mientras que los siguientes 3 involucran otro (cualquier otro) ítem, y como puede verse, estos otros ítems simplemente 'toman' los valores del anterior, mientras que el último comentario resulta de volver al último elemento original y moverlo, con el resultado del comentario correcto.
No puedo ver lo que estoy haciendo mal. Cualquier sugerencia sería valorada.
FilB
Los documentos de este complemento muestran que los eventos (como dragEnd) llevan consigo el objeto de evento original, que se puede usar para acceder al elemento que se está arrastrando, así como a la posición del mouse.
draggie.on( 'dragEnd', function( event, pointer ) {...})En su caso, probablemente querrá la ubicación del mouse en dragEnd:
draggie.on('dragEnd', function(e, p) { console.log(`dragEnd: X: ${p.pageX}, Y: ${p.pageY}` ); })Codepen: https://codepen.io/javacado/pen/VwMzYjb?editors=1111