drag_drop_controller.js

import { Droppable } from "@shopify/draggable";
import ApplicationController from "./application_controller";

export default class extends ApplicationController {
  static targets = ["container", "dropzone", "targetDropzone"];

  connect() {
    this.droppable = new Droppable(this.containerTargets, {
      draggable: ".draggable",
      dropzone: ".dropzone"
    });

    this.droppable.on(
      "drag:start",
      (e => {
        if (e.data.sourceContainer.id === "whiteboard") {
          this.appending = false;
          this.updating = true;
        }
        if (
          e.data.sourceContainer.id === "selected-product-carousel-container"
        ) {
          this.appending = true;
          this.updating = false;
        }
      }).bind(this)
    );

    this.droppable.on(
      "droppable:dropped",
      (e => {
        if (!e.data.dropzone.classList.contains("source-dropzone")) {
          if (this.appending) {
            this.allowAppend = true;
            this.allowUpdate = false;
          }

          if (this.updating) {
            this.allowUpdate = true;
            this.allowAppend = false;
          }
        }
      }).bind(this)
    );

    this.droppable.on(
      "droppable:returned",
      (e => {
        this.allowAppend = false;
        this.allowUpdate = false;
      }).bind(this)
    );

    this.droppable.on(
      "drag:stop",
      (e => {
        // ...
      }).bind(this)
    );
  }
}

whiteboard.html.erb

<div data-controller="drag-drop">
  <div id="carousel" data-target="drag-drop.container" class="max-w-full">
    <div class="dropzone draggable-droppable--occupied source-dropzone" data-target="drag-drop.dropzone">
      <%= image_tag "...", class: "lazy draggable" %>
    </div>
  </div>
  <div class="" id="whiteboard" data-target="drag-drop.container drag-drop.dropzone drag-drop.targetDropzone">
    <!-- -->
  </div>
</div>