Обновите данные, когда я перетаскиваю точку - PullRequest
Новая
       35

Обновите данные, когда я перетаскиваю точку

0 голосов
/ 07 апреля 2020

РЕДАКТИРОВАТЬ:

Итак, я отредактировал свой пост и мой код.

С учетом того, что Джастинас сказал мне, я изменил свой код, поэтому я отображаю информацию о 3 точки ниже деления.

Но вот в чем дело, когда я перемещаю точку, новая информация отображается под остальными.

Я бы хотел, чтобы информация обновлялась непосредственно на соответствующем дисплее без воссоздаем новую информацию ниже.

Спасибо за вашу помощь и еще раз извините за мой engli sh.

Вот мой код: 

$(function () {

    let data = [
        ["1", "123", "247", "#FF0000",
            "https://www.google.com",
            "https://www.google.com"
        ],
        ["2", "785", "230", "#FF0000",
            "https://www.google.com",
            "https://www.google.com"
        ],
        ["3", "422", "332", "#FF0000",
            "https://www.google.com",
            "https://www.google.com"
        ]
    ];

    let url;
    let pastille;
    let urlOpen;
    let urlMove;

    for (i = 0; i < data.length; i++) {
        let datas = data[i];
        let id = datas[0];
        let x = datas[1];
        let y = datas[2];
        pastille = document.createElement('a');
        urlFmOpen = datas[4];
        pastille.setAttribute("href", urlFmOpen);
        pastille.setAttribute("class", "pointData");
        pastille.textContent = datas[0];
        pastille.style.textDecoration = "none";
        pastille.style.backgroundColor = datas[3];
        pastille.style.position = "absolute";
        pastille.style.width = "16px";
        pastille.style.borderRadius = "12px";
        pastille.style.border = "2px solid white";
        pastille.style.color = "white";
        pastille.style.textAlign = "center";
        pastille.style.fontSize = "14px";
        pastille.style.cursor = "pointer";
        pastille.style.padding = "3px";
        pastille.style.left = (datas[1] - 11) + "px";
        pastille.style.top = (datas[2] - 11) + "px";
        urlFmMove = datas[5];
        $("body").append(pastille);
        $('#info').append("<p>" + 'id ' + id + ' x: ' + x  +  ' y: ' + y +  "</p>")
        var testurl;
        $(pastille).draggable({
            stop: function () {
                var offset = $(this).offset();
                var xPos = offset.left;
                var yPos = offset.top;
                $('#info').append("<p>" + 'id ' + id + ' x: ' + xPos + ' y: ' + yPos + "</p>")
                // testurl = window.location.href = urlFmMove + "&$PosX=" + xPos + "&$PosY=" +
                //     yPos;
                console.log("xPos: " + xPos + " yPos: " + yPos)
            }
        })
    }

    
});
.div1 {
      width: 900px;
      height: 600px;
      background-color: grey;
     }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
     <div class="div1"></div>
    <div id="info">
       
    </div>

1 Ответ

2 голосов
/ 07 апреля 2020

Из ваших комментариев я вижу, что все, что вам нужно сделать, это отслеживать все координаты каждого элемента. Для этого элемента добавления с уникальным идентификатором и при остановке перетаскивания просто отредактируйте его содержимое 

$(function() {

  let data = [
    ["1", "20", "30", "#FF0000",
      "https://www.google.com",
      "https://www.google.com"
    ],
    ["2", "60", "90", "#FF0000",
      "https://www.google.com",
      "https://www.google.com"
    ],
    ["3", "90", "150", "#FF0000",
      "https://www.google.com",
      "https://www.google.com"
    ]
  ];

  let url;
  let pastille;
  let urlOpen;
  let urlMove;

  for (i = 0; i < data.length; i++) {
    let datas = data[i];
    let id = datas[0];
    let x = datas[1];
    let y = datas[2];
    pastille = $('<a>');
    pastille
      .attr('href', datas[4])
      .addClass('pointData')
      .css({
        backgroundColor: datas[3],
        left: (datas[1] - 11) + 'px',
        top: (datas[2] - 11) + 'px'
      })
      .text(datas[0]);

    urlFmMove = datas[5];
    $("body").append(pastille);
    let info = $('<p>');
    info
      .attr('id', 'id-' + id)
      .text('id ' + id + ' x: ' + x + ' y: ' + y)
    $('#info').append(info)
    var testurl;

    $(pastille).draggable({
      stop: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#id-' + id).text('id ' + id + ' x: ' + xPos + ' y: ' + yPos);

        console.log("xPos: " + xPos, " yPos: " + yPos);
      }
    })
  }


});
.div1 {
  width: 100%;
  height: 200px;
  background-color: grey;
}

.pointData {
  text-decoration: none;
  padding: 3px;
  cursor: pointer;
  font-size: 14px;
  text-align: center;
  color: wite;
  border: 2px solid white;
  border-radius: 12px;
  width: 16px;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="div1"></div>
<div id="info">

</div>
...