polyline path to follow a draggable modal

Question

• Here is what I am trying to do: on click (right now just click anywhere on the map) will draw the line and display a drag-able modal pop-up, I have static coordinates set for the start point (which will later be dynamic), but I would like the second point to find the draggable pop-up modal and stay with it even when it is dragged.
• I started the logic of following the mouse pointer continuously to get the end coordinates. But now thinking not the best method for finding and following modal.

Below is what I have: arcgis-js

require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/support/webMercatorUtils",
      "dojo/dom",
    ], 

  function init (Map, MapView, Graphic, GraphicsLayer, webMercatorUtils, dom) {
    var map = new Map({
      basemap: "topo-vector"     
    });
    var view = new MapView({
      container: "viewDiv",             
      map: map,
      center: [-80.96135253906438, 35.9411934679851],
      zoom: 3
    });

    var graphicsLayer = new GraphicsLayer();
    map.add(graphicsLayer);  

    // Create a line geometry
    var simpleLineSymbol = {
       type: "simple-line",
       color: [13,121,190, .9],
       style: "short-dash",
       width: 3
     };

     function showCoordinates(evt) {
        var point = view.toMap({x: evt.x, y: evt.y});
        //the map is in web mercator but display coordinates in geographic (lat, long)
        var mp = webMercatorUtils.webMercatorToGeographic(point);
        //display mouse coordinates
        dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);


       const coordinatesAx = -80.96135253906438;
       const coordinatesAy = 35.9411934679851;

       const coordinatesBx = mp.x.toFixed(3);
       const coordinatesBy = mp.y.toFixed(3);

       var polyline = {
         type: "polyline",
         paths: [
           [coordinatesAx, coordinatesAy], 
           [coordinatesBx, coordinatesBy]
         ]
       };
       var polylineGraphic = new Graphic({
         geometry: polyline,
         symbol: simpleLineSymbol
       })
       //graphicsLayer.add(polylineGraphic);
        document.getElementById("viewDiv").onclick = function fun() {
           graphicsLayer.add(polylineGraphic);
        }
      }
      view.when(function(){
        //after map loads, connect to listen to mouse move & drag events
        view.on("pointer-move", showCoordinates);
        //graphicsLayer.add(polylineGraphic);
      });
});

And for the draggable modal using jQuery Kendo, that I'll call in a separate file (but shouldn't matter how this part is derived just want point B to follow modal/div elem).

  <script>
     $("#dialog").kendoWindow({
        draggable: true
     });
  </script>

• here is a visual of what I am trying to accomplish. This would que on click, and the polyline would follow the draggable modal...*

Mostly just struggling with getting one point of the line to find, and follow my draggable modal. any ideas how I could accomplish this? on pointer-move is clearly not the answer at all.

---

Answer 1

I've done some changes to your code
https://codepen.io/nettaben/pen/YzPrYrY

What is new:

• When the dialog is open and the mouse is moving ==> the line keeps "updating" (remove and add) and the dialog moves along with the cursor.
• On map click the "moveAlong" behavior stops
• On Kendo window dragstart the behavior is changed back to moveAlong

I had some issues with the Kendo drag events, still I believe this a good starting point to your question.

EDIT:
I've changed the code a bit, and prevented from the Kendo dragging to activate, with ev.preventDefault() so on dialog drag the behavior falls back to "moveAlong", and when the user clicks on the map, the modal will stop moving.
Kendo is a nice library, but if your question is about Kendo events - maybe nain SOF is a better place for this question.