HOW TO DRAG HOT-SPOT

[aliMurtaja]

how to drag hotspot,

All I need to drag the hotspot from one place to another, just like we drag the icon in google-map

I did this seeing this --> https://github.com/mpetroff/pannellum/issues/1163 but it didn't work.

My code is:

    var newHotspot = {
      id: currenHSiD,
      pitch: pitch,
      yaw: yaw,
      cssClass: "custom-hotspot",
      createTooltipFunc: addTagHotspot,
      // createTooltipArgs: "New Hotspot",
      createTooltipArgs: {
        pitch, yaw, currenHSiD
      },
      isAddInfoEnable: true,
      dragHandlerFunc : dragHandlerFunc,
      dragHandlerArgs : {id: 0}
    };
    if(previousHSiD){
      viewer.removeHotSpot(previousHSiD);
    }

    // Add hotspot
    viewer.addHotSpot(newHotspot);

   function dragHandlerFunc(e, args, hs) {
    alert()
    console.log("mouseupmouseup >>", args.id, hs.yaw, hs.pitch);
    if (e.type == "mouseup") {
        // Here I can update the hotSpot in my database by using args.id and hs.yaw, hs.pitch for the new position
    }

    <div
      className="panorama"
      ref={panoramaRef}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      draggable= {true}
    ></div>

here's function dragHandlerFunc didn't get a call

[mpetroff]

You're referencing the dragHandlerFunc function in the newHotspot object before you define the function. You can't reference something you haven't yet defined.

[aliMurtaja]

Ok got it