Отделение Sacar coordenadas de diferentes обманное перетаскивание y отбрасывает JavaScript

Estoy realizando un proyecto en el cual manejo перетаскивает отбрасывание y de JavaScript. Танго Ahora ya Лос делители que se arrastran pero я piden que saque las coordenadas x,y de cada uno y ahí es надел está el problema: никакой sé cómo hacerlo pues al arrastrar cualquier div las coordenadas x,y toman el valor del último que se arrastró.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Drag and Drop</title>

        <style>

            #drag-1, #drag-2 {
                width: 3px;
                height: 5px;
                background-color: #29e;
                color: white;
                border-radius: 0.75em;
                padding:3%;
                -webkit-transform: translate(0px, 0px);
                transform: translate(0px, 0px);
            }

            #drag-me::before {
                content: "#" attr(id);
                font-weight: bold;
            }

        </style>

    </head>

    <body>

        <div id="drag-1" class="draggable">    
            <p>  HC</p>
        </div>

        <div id="drag-2" class="draggable">    
            <p>  PO</p>
        </div>   

        <form id="form-ingreso">
            <input type="text" id="x"  />
            <input type="text" id="y"  />     
            <input type="text" id="x1"  />
            <input type="text" id="y1"  />    
        </form>

        <script src="js/interact.js"></script>
        <script src="js/interact.min.js"></script>

        <script>

            interact('.draggable').draggable({

                // enable inertial throwing
                inertia: true,

                // keep the element within the area of it's parent
                restrict: {
                    restriction: "parent",
                    endOnly: true,
                    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
                },

                // enable autoScroll
                autoScroll: true,

                // call this function on every dragmove event
                onmove: dragMoveListener,

                // call this function on every dragend event
                onend: function (event) {

                    var A = event.dx;
                    var B = event.dy;       
                    var x1 = event.dx;
                    var y1 = event.dy;

                    document.getElementById('x').value = A;
                    document.getElementById('y').value = B;      
                    document.getElementById('x1').value = x1;
                    document.getElementById('y1').value = y1;

                }

            });

            function dragMoveListener (event) {

                var target = event.target,

                // keep the dragged position in the data-x/data-y attributes
                x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
                y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

                // translate the element
                target.style.webkitTransform = target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

                // update the position attributes
                target.setAttribute('data-x', x);
                target.setAttribute('data-y', y);

            }

            // this is used later in the resizing and gesture demos
            window.dragMoveListener = dragMoveListener;

        </script>

    </body>

</html>
6
задан 01.03.2017, 21:09
0 ответов