Take coordinates of different div with drag and drop JavaScript

Question

Take coordinates of different div with drag and drop JavaScript

Navigation

#1 by (6 votes)

6

I'm doing a project in which I manage drag and drop of JavaScript . Now I have the dividers that crawl but they ask me to draw the coordinates x,y of each and that's where the problem lies: I do not know how to do it because when dragging any div the coordinates x,y take the value of the last who crawled.

<!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>

javascript drag-and-drop

asked by json 01.03.2017 в 18:26

source

1 answer

Google maps is not shown on the server but on the local Slider JQuery UI - Smooth movement

score 6 · Accepted Answer

When the drag ends, a function that triggers the event is triggered. That event contains the item that you just dragged. It is in event.target .

A not very elegant (but quick) way to do what you ask is to make the ID of each input fit with the element ID plus a suffix (x and y). That way, when you drop an item, reading its ID you can know which inputs to update:

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 element = event.target;
    document.getElementById(element.id + 'x').value = element.getAttribute('data-x');
    document.getElementById(element.id + 'y').value = element.getAttribute('data-y');

  }

});

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 posiion attributes
  target.setAttribute('data-x', x);
  target.setAttribute('data-y', y);

}

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

#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;
}

<script src="http://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>

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

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

<form id="form-ingreso">
  <label> Elemento 1
    <input type="text" id="drag-1x"  />
    <input type="text" id="drag-1y"  />
  </label>
  <br>
  <label> Elemento 2
    <input type="text" id="drag-2x"  />
    <input type="text" id="drag-2y"  />
  </label>
</form>