Target a selector to do a drag & drop

Question

When I click I create a point in a div.

I would like to be able to move this point in a drag and drop way.

In my code I have created an orange item that I can move but I can't do it with the points I create, I can't target it.

Moreover I would like that when I move the point, once set, that the new coordinates are saved instead of the old ones and that when the point is set, it opens an url (no matter say google) but I don't know if it's possible.

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

This might be above and beyond what you're looking to do. Consider using the jQuery UI library so you can make use of Draggable. Consider the following example.

 $(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) { ox = ev.pageX; oy = 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>

You can see I made a few small changes. Using a checkbox allows for a failover in a sense. This also gives a toggled look / style so the user knows when they are able to add a point.

Using jQuery Draggable , this just makes managing the draggable elements a lot easier. The Item is draggable from the start. When Adding a Point, no dragging allowed. Once toggled off, all items can be dragged. Moving a point updates the Array and the Table.