Liveview javascript pushEvent to myself, not the parent liveview?

pushEventTo is your friend. Use the DOM id of the element with the hook on it as the target/to.

import Sortable from "sortablejs"; 
  
 const Drag = { 
   mounted() { 
     const hook = this; 
     const id = "#" + this.el.id; 
  
     document.querySelectorAll(`${id} .dropzone`).forEach((dropzone) => { 
       new Sortable(dropzone, { 
         animation: 200, 
         delay: 50, 
         delayOnTouchOnly: true, 
         direction: "vertical", 
         group: "shared", 
         draggable: ".draggable", 
         ghostClass: "sortable-ghost", 
         onEnd: function (evt) { 
           hook.pushEventTo(id, "dropped", { 
             draggedId: evt.item.id, // id of the dragged item 
             dropzoneId: evt.to.id, // id of the drop zone where the drop occured 
             draggableIndex: evt.newDraggableIndex, // index where the item was dropped (relative to other items in the drop zone) 
           }); 
         }, 
       }); 
     }); 
   }, 
 }; 
  
 export default Drag;

Maybe I can pass @myself to the Hook, and then use pushEventTo in the Javascript? Hmmm

Edit: posted at the same time thanks will try this!

Edit 2: That worked, thanks!

For future readers, pushEventTo also supports passing the node element e.g. this.el instead of selector e.g. "#" + this.el.id as the first parameter for target.

https://github.com/phoenixframework/phoenix_live_view/pull/1397

Your note was merged into the docs. Add note to push event to by user20230119 · Pull Request #3099 · phoenixframework/phoenix_live_view · GitHub