mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.

Home Page:https://pannellum.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

HOW TO DRAG HOT-SPOT

aliMurtaja opened this issue · comments

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 --> #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

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.

Ok got it