以选择器为目标进行拖放

Question

当我点击时，我会在 div 中创建一个点。

我希望能够以拖放方式移动这个点。

在我的代码中，我创建了一个可以移动的橙色项目，但我不能用我创建的点来移动它，我无法定位它。

此外，我希望当我移动点时，一旦设置，保存新坐标而不是旧坐标，并且当设置点时，它会打开一个 url（不管说谷歌），但我没有不知道有没有可能。

$(document).ready(function() {

  let count = 0;
  let resultArray = [];
  let addPoint = false;
  let url;

  $(".button").on('click', function() {
    addPoint = !addPoint
  });

  $(".div1").click(function(ev) {

    if (addPoint == true) {
      $(".div1").append(
        $(`<div>${count + 1}</div>`).css({
          position: 'absolute',
          top: ev.pageY + 'px',
          left: ev.pageX + 'px',
          width: '16px',
          borderRadius: '12px',
          background: 'blue',
          color: 'white',
          textAlign: 'center',
          fontSize: '14px',
          padding: '3px'

        })
      );
      count = count + 1
      url = "<a href='https://www.google.fr' target='blank'>url</a>"
      $("#myTBody").append(
        "<tr><td>" + count + "</td><td>" + ev.pageX + "</td><td>" + ev.pageY +
        "</td><td>" + url + "</td></tr>"
      )
      let point = {
        id: count,
        x: ev.pageX,
        y: ev.pageY,
        url: url
      }
      resultArray.push(point);
      // $("tr").on('click', function () {
      // 	console.log($(this).children(":first").text())
      // });
    }
  });

  const el = document.querySelector(".item");

  el.addEventListener('mousedown', mousedown);

  function mousedown(e) {

    window.addEventListener('mousemove', mousemove);
    window.addEventListener('mouseup', mouseup);

    let prevX = e.clientX;
    let prevY = e.clientY;

    function mousemove(e) {
      let newX = prevX - e.clientX;
      let newY = prevY - e.clientY;

      const rect = el.getBoundingClientRect();

      el.style.left = rect.left - newX + "px";
      el.style.top = rect.top - newY + "px";

      prevX = e.clientX;
      prevY = e.clientY;
    }

    function mouseup(e) {

      window.removeEventListener("mousemove", mousemove);
      window.removeEventListener("mouseup", mouseup);

    }
  }
});

.button {
  padding: 10px;
}

.item {
  height: 40px;
  width: 40px;
  position: absolute;
  background: orange;
}

.div1 {
  width: 400px;
  height: 200px;
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button">Add a point</button>
<div class="item"></div>
<div class="div1">
</div>
<table>
  <thead id="myTHead">
    <tr>
      <th>PointID</th>
      <th>PointX</th>
      <th>PointY</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody id="myTBody">
  </tbody>
</table>

Answer 1

这可能超出您的预期。考虑使用 jQuery UI 库，以便您可以使用 Draggable。请考虑以下示例。

$(function() {

  let count = 0;
  let resultArray = [];
  let url;

  function makePoint(trg, cnt, ev) {
    var p = $("<div>", {
      class: "point"
    }).css({
      top: ev.pageY + 'px',
      left: ev.pageX + 'px'
    }).html(cnt).appendTo(trg);
    p.draggable({
      containment: "parent",
      stop: function(e, ui) {
        var i = parseInt($(this).text());
        updatePoint(i, e);
      }
    });
    return {
      id: cnt,
      x: ev.pageX,
      y: ev.pageY
    };
  }

  function updatePoint(id, ev) {
    $.each(resultArray, function(k, o) {
      if (id == o.id) {
        o.x = ev.pageX;
        o.y = ev.pageY;
        $("#myTBody tr:eq(" + k + ") td:eq(1)").html(ev.pageX);
        $("#myTBody tr:eq(" + k + ") td:eq(2)").html(ev.pageY);
      };
    });
  }

  $(".button").click(function() {
    $("input", this).prop("checked", !$("input", this).prop("checked"));
    if ($("input", this).is(":checked")) {
      $(".ui-draggable").draggable("disable");
    } else {
      $(".ui-draggable").draggable("enable");
    }
    $(this).toggleClass("clicked");
  });

  $(".div1").click(function(e) {
    if ($(".button input").is(":checked")) {
      let point = makePoint($(".div1"), ++count, e);
      point.url = "<a href='https://www.google.fr' target='blank'>url</a>";
      resultArray.push(point);
      $("#myTBody").append(
        "<tr><td>" + count + "</td><td>" + point.x + "</td><td>" + point.y +
        "</td><td>" + point.url + "</td></tr>"
      )
    }
  });

  $(".item").draggable({
    containment: ".div1"
  });
});

.button {
  padding: .2em .4em;
  border: 1px solid #6c6c6c;
  border-radius: 3px;
  background-color: #eee;
  width: auto;
  max-width: 100px;
  cursor: pointer;
}

.button input {
  display: none;
}

.item {
  height: 40px;
  width: 40px;
  position: absolute;
  background: orange;
}

.div1 {
  width: 400px;
  height: 200px;
  background-color: grey;
}

.point {
  position: absolute;
  width: 16px;
  border-radius: 12px;
  background: blue;
  color: white;
  text-align: center;
  font-size: 14px;
  padding: 3px;
  cursor: default;
}

.clicked {
  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.js"></script>
<div class="button"><input type="checkbox"><span class="label">Add a Point</span></div>
<div class="item"></div>
<div class="div1">
</div>
<table>
  <thead id="myTHead">
    <tr>
      <th>PointID</th>
      <th>PointX</th>
      <th>PointY</th>
      <th>URL</th>
    </tr>
  </thead>
  <tbody id="myTBody">
  </tbody>
</table>

您可以看到我做了一些小改动。从某种意义上说，使用复选框可以实现故障转移。这也提供了一种切换的外观/样式，以便用户知道他们何时能够添加一个点。

使用jQuery Draggable，这只会使管理可拖动元素变得更加容易。该项目从一开始就可以拖动。添加点时，不允许拖动。关闭后，可以拖动所有项目。移动一个点会更新 Array 和 Table。