Выберите селектор для перетаскивания

Question

Когда я нажимаю, я создаю точку в элементе.

Я хотел бы иметь возможность перемещать эту точку путем перетаскивания.

В моем коде я создал оранжевый объект, который я могу переместить, но я не могу сделать это с помощью созданных точек, я не могу нацелиться на него.

Более того, мне бы хотелось, чтобы при перемещении точки после установки новые координаты сохраняются вместо старых, и что, когда точка установлена, она открывает URL (независимо от того, скажем, Google), но я не знаю, возможно ли это.

$(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 , это просто делает управление перетаскиваемыми элементами намного проще. Предмет можно перетаскивать с самого начала. При добавлении точки перетаскивание запрещено. После выключения все предметы можно перетаскивать. Перемещение точки обновляет массив и таблицу.