拖动点时更新数据

Posted 2023-05-08

【中文标题】拖动点时更新数据

【英文标题】：Update a data when I drag a point

【发布时间】：2020-07-19 09:56:19

【问题描述】：

编辑：

所以我编辑了我的帖子和我的代码。

根据 Justinas 告诉我的内容，我更改了代码，因此我在 div 下方显示了 3 个点的信息。

但事情是这样的，当我移动一个点时，新信息会显示在其他点下方。

我希望信息直接在相关显示中自行更新，而无需在下方重新创建新信息。

感谢您的帮助，再次为我的英语感到抱歉。

这是我的代码：

$(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>

【问题讨论】：

你能在 SO Snippet 中创建工作示例吗？

我可以创建一个片段作为示例。

好吧，在您的示例中，我看到所有点都保持其位置。至少在 FireFox 上

是的，但实际上我在另一个程序中使用了这段代码，并且在这个程序中，当我移动一个点时，它是最后一个更新的点。

所以这意味着你提供了错误的例子。在你的“另一个程序”中使用这个例子

【参考方案1】：

从您的 cmets 中，我看到您需要做的就是跟踪每个元素的所有坐标。对于具有唯一 ID 和拖动停止的附加元素，只需编辑其内容

$(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>