playbook_ui 14.18.0.pre.alpha.play2042addturbosupporttopopoverkit7423 → 14.18.0.pre.alpha.play2149overlaykitdynamicbug7619

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb

@@ -0,0 +1,55 @@
+<% initial_items = [
+  {
+    id: "211",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "212",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "213",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<% next_init_items = [
+  {
+    id: "2111",
+    url: "https://unsplash.it/500/400/?image=633",
+  },
+  {
+    id: "2112",
+    url: "https://unsplash.it/500/400/?image=634",
+  },
+  {
+    id: "2113",
+    url: "https://unsplash.it/500/400/?image=637",
+  },
+] %>
+
+<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "vertical" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", orientation: "column", height: "367px" }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "purple"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<br/>
+
+<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "line"}) do %>
+  <%= pb_rails("draggable/draggable_container", props: { drop_zone_direction: "horizontal" }) do %>
+    <%= pb_rails("flex", props: { gap: "sm", html_options: { style: "width: 332px;" } }) do %>
+      <% initial_items.each do |item| %>
+        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], drop_zone_line_color: "primary"}) do %>
+          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md

@@ -0,0 +1,5 @@
+When using the "line" style, make sure to set the appropriate `direction` attribute within the `drop_zone_direction` prop on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" style and does not affect other drop zone styles. Also, set the `drop_zone_line_color` prop on the `draggable/draggable_item` component to "primary" or "purple".
+
+The length of the line is calculated based off of the width (for "vertical") or height (for "horizontal") of the parent container holding the draggable items. 
+
+Additionally, if the parent container of the `draggable`/`draggable/draggable_container` (or a subcontainer within) does not have a set height (for "vertical") or width (for "horizontal"), like the [Draggable Drop Zones doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones) does, elements on the page may jump up (for "vertical") or to the left (for "horizontal") when an item is actively being dragged. To prevent this, give a parent element a fixed height (for "vertical") or width (for "horizontal") as demonstrated in this doc example.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md

@@ -0,0 +1,5 @@
+The Draggable kit lets you customize the style of drop zones that appear when dragging an item.
+
+By default, drop zones are in the "ghost" style, but you can also choose from "shadow," "outline," and "line."
+
+When using the "line" type, make sure to set the appropriate `direction` attribute on the `draggable/draggable_container` component based on the orientation of your draggable view: "vertical" or "horizontal." Note that the direction attribute only applies to the "line" type and does not affect other drop zone styles. For more on the "line" style in particular, check out the [Draggable Drop Zones Line doc example](https://playbook.powerapp.cloud/kits/draggable/rails#draggable-drop-zones-line).

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
+const data = [
+  {
+    id: "100",
+    url: "https://unsplash.it/500/400/?image=638",
+  },
+  {
+    id: "200",
+    url: "https://unsplash.it/500/400/?image=639",
+  },
+  {
+    id: "300",
+    url: "https://unsplash.it/500/400/?image=640",
+  },
+];
+
+const DraggableDefault = (props) => {
+  const [initialState, setInitialState] = useState(data);
+
+  return (
+    <>
+    <DraggableProvider initialItems={data}
+        onReorder={(items) => setInitialState(items)}
+    >
+        <Draggable.Container {...props}>
+        <Flex>
+            {initialState.map(({ id, url }) => (
+              <Draggable.Item dragId={id} 
+                  key={id}
+                  onDrag={() => console.log(`${id} drag!`)}
+                  onDragEnd={() => console.log(`${id} drag end!`)}
+                  onDragEnter={() => console.log(`${id} drag enter!`)}
+                  onDragLeave={() => console.log(`${id} drag leave!`)}
+                  onDragOver={() => console.log(`${id} drag over!`)}
+                  onDragStart={() => console.log(`${id} drag start!`)}
+                  onDrop={() => console.log(`${id} drop!`)}
+              >
+                <Image alt={id} 
+                    margin="xs"
+                    size="md" 
+                    url={url} 
+                />
+              </Draggable.Item>
+            ))}
+         </Flex>
+        </Draggable.Container>
+    </DraggableProvider>
+    </>
+
+  );
+};
+
+export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md

@@ -0,0 +1 @@
+You can add drag event listeners for `onDrag`, `onDragEnd`, `onDragEnter`, `onDragLeave`, `onDragOver`, `onDragStart`, and `onDrop`.

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -9,6 +9,7 @@ examples:
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
+  - draggable_event_listeners: Draggable Event Listeners
 
   rails:
   - draggable_default: Default
@@ -17,5 +18,7 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
   - draggable_multiple_containers: Dragging Across Multiple Containers
+  - draggable_drop_zones: Draggable Drop Zones
+  - draggable_drop_zones_colors: Draggable Drop Zones Colors
+  - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -6,4 +6,5 @@ export { default as DraggableMultipleContainers } from './_draggable_multiple_co
 export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
-export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.rb

@@ -5,9 +5,17 @@ module Playbook
     class Draggable < ::Playbook::KitBase
       prop :initial_items, type: Playbook::Props::Array,
                            default: []
+      prop :drop_zone_type, type: Playbook::Props::Enum,
+                            values: %w[ghost shadow outline line],
+                            default: "ghost"
+      prop :drop_zone_color, type: Playbook::Props::Enum,
+                             values: %w[neutral primary purple],
+                             default: "neutral"
 
       def data
-        Hash(prop(:data)).merge(pb_draggable: true)
+        Hash(prop(:data)).merge(pb_draggable: true,
+                                drop_zone_type: drop_zone_type,
+                                drop_zone_color: drop_zone_color)
       end
 
       def classname

data/app/pb_kits/playbook/pb_draggable/draggable_container.rb

@@ -7,13 +7,23 @@ module Playbook
                  default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
+      prop :drop_zone_direction, type: Playbook::Props::Enum,
+                                 values: ["horizontal", "vertical", nil],
+                                 default: nil
 
       def data
         Hash(prop(:data)).merge(pb_draggable_container: true)
       end
 
       def classname
-        generate_classname("pb_draggable_container")
+        direction_class = case drop_zone_direction
+                          when "horizontal"
+                            "line_horizontal"
+                          when "vertical"
+                            "line_vertical"
+                          end
+
+        generate_classname("pb_draggable_container", direction_class, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_draggable/draggable_item.rb

@@ -9,13 +9,23 @@ module Playbook
                  default: "div"
       prop :container, type: Playbook::Props::String,
                        default: ""
+      prop :drop_zone_line_color, type: Playbook::Props::Enum,
+                                  values: ["primary", "purple", nil],
+                                  default: nil
 
       def data
         Hash(prop(:data)).merge(pb_draggable_item: true)
       end
 
       def classname
-        generate_classname("pb_draggable_item")
+        line_color_class = case drop_zone_line_color
+                           when "primary"
+                             "drop_zone_color_primary"
+                           when "purple"
+                             "drop_zone_color_purple"
+                           end
+
+        generate_classname("pb_draggable_item", line_color_class, separator: " ")
       end
     end
   end

data/app/pb_kits/playbook/pb_draggable/index.js

@@ -1,24 +1,26 @@
 import PbEnhancedElement from "../pb_enhanced_element";
 
-const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
+const DRAGGABLE_SELECTOR  = "[data-pb-draggable]";
 const DRAGGABLE_CONTAINER = ".pb_draggable_container";
+const NEEDS_CLONE         = ["shadow", "outline", "line"];   // clone only for these types
 
 export default class PbDraggable extends PbEnhancedElement {
-  static get selector() {
-    return DRAGGABLE_SELECTOR;
-  }
+  static get selector() { return DRAGGABLE_SELECTOR; }
 
   connect() {
     this.state = {
-      items: [],
-      dragData: { id: "", initialGroup: "" },
-      isDragging: "",
-      activeContainer: ""
+      items:        [],
+      dragData:     { id: "", initialGroup: "" },
+      isDragging:   "",
+      activeContainer: "",
     };
 
-    this.draggedItem = null;
+    this.draggedItem   = null;
     this.draggedItemId = null;
+    this.dragGhost     = null;
     this.hasMultipleContainers = false;
+    this.dragZoneType  = "";
+    this.dragZoneColor = "";
 
     document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
   }
@@ -26,13 +28,12 @@ export default class PbDraggable extends PbEnhancedElement {
   setState(newState) {
     this.state = { ...this.state, ...newState };
     if (newState.items) {
-      const customEvent = new CustomEvent('pb-draggable-reorder', {
+      this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
         detail: {
           reorderedItems: this.state.items,
-          containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id
-        }
-      });
-      this.element.dispatchEvent(customEvent);
+          containerId:    this.element.querySelector(DRAGGABLE_CONTAINER).id,
+        },
+      }));
     }
   }
 
@@ -43,71 +44,102 @@ export default class PbDraggable extends PbEnhancedElement {
 
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
-    this.element.querySelectorAll(".pb_draggable_item img").forEach(img => {
-      img.setAttribute("draggable", "false");
-    });
-
-    this.element.querySelectorAll(".pb_draggable_item").forEach(item => {
-      item.addEventListener("dragstart", this.handleDragStart.bind(this));
-      item.addEventListener("dragend", this.handleDragEnd.bind(this));
-      item.addEventListener("dragenter", this.handleDragEnter.bind(this));
-    });
+    this.element.querySelectorAll(".pb_draggable_item img")
+      .forEach(img => img.setAttribute("draggable", "false"));
+
+    this.element.querySelectorAll(".pb_draggable_item")
+      .forEach(item => {
+        item.addEventListener("dragstart", this.handleDragStart.bind(this));
+        item.addEventListener("dragend",   this.handleDragEnd.bind(this));
+        item.addEventListener("dragenter", this.handleDragEnter.bind(this));
+      });
 
-    containers.forEach(container => {
-      container.addEventListener("dragover", this.handleDragOver.bind(this));
-      container.addEventListener("drop", this.handleDrop.bind(this));
+    containers.forEach(c => {
+      c.addEventListener("dragover", this.handleDragOver.bind(this));
+      c.addEventListener("drop",     this.handleDrop.bind(this));
     });
   }
 
+  /* ---------------- DRAG START ---------------- */
   handleDragStart(event) {
     // Needed to prevent images within draggable items from being independently draggable
     // Needed if using Image kit in draggable items
-    if (event.target.tagName.toLowerCase() === 'img') {
+    if (event.target.tagName.toLowerCase() === "img") {
       event.preventDefault();
       return;
     }
 
-    const container = event.target.closest(DRAGGABLE_CONTAINER);
-    this.draggedItem = event.target;
+    const container    = event.target.closest(DRAGGABLE_CONTAINER);
+    this.draggedItem   = event.target;
     this.draggedItemId = event.target.id;
+    this.dragZoneType  = this.element.dataset.dropZoneType  || "";
+    this.dragZoneColor = this.element.dataset.dropZoneColor || "";
 
     this.setState({
-      dragData: { id: this.draggedItemId, initialGroup: container.id },
-      isDragging: this.draggedItemId
+      dragData:   { id: this.draggedItemId, initialGroup: container.id },
+      isDragging: this.draggedItemId,
     });
 
-    event.target.classList.add("is_dragging");
+    this.draggedItem.classList.add(
+      "is_dragging",
+      `drop_zone_${this.dragZoneType}`,
+      `drop_zone_color_${this.dragZoneColor}`,
+    );
+
     if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', this.draggedItemId);
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", this.draggedItemId);
+
+      /* ---------- custom ghost clone (shadow + outline only) ---------- */
+      if (NEEDS_CLONE.includes(this.dragZoneType)) {
+        const ghost = this.draggedItem.cloneNode(true);
+        ghost.classList.remove(
+          "is_dragging",
+          `drop_zone_${this.dragZoneType}`,
+          `drop_zone_color_${this.dragZoneColor}`,
+        );
+        const { width, height } = this.draggedItem.getBoundingClientRect();
+        Object.assign(ghost.style, {
+          border:    "none",
+          width:     `${width}px`,
+          height:    `${height}px`,
+          position:  "absolute",
+          top:      "-9999px",
+          left:     "-9999px",
+          boxSizing: "border-box",
+          zIndex:    "9999",
+        });
+        document.body.appendChild(ghost);
+        this.dragGhost = ghost;
+        event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
+      }
+      /* ---------------------------------------------------------------- */
     }
 
-    setTimeout(() => {
-      event.target.style.opacity = '0.5';
-    }, 0);
+    if (this.dragZoneType !== "line") {
+      requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
+    }
   }
 
+  /* ---------------- DRAG ENTER ---------------- */
   handleDragEnter(event) {
     if (!this.draggedItem || event.target === this.draggedItem) return;
-
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragEnter(event);
-    } else {
-      this.handleSingleContainerDragEnter(event);
-    }
+    this.hasMultipleContainers
+      ? this.handleMultiContainerDragEnter(event)
+      : this.handleSingleContainerDragEnter(event);
   }
 
   handleSingleContainerDragEnter(event) {
-    const targetItem = event.target.closest('.pb_draggable_item');
+    const targetItem = event.target.closest(".pb_draggable_item");
+    // If we're entering a container directly or there's no target item
     if (!targetItem) return;
 
     const container = targetItem.parentNode;
-    const items = Array.from(container.children);
-
-    const draggedIndex = items.indexOf(this.draggedItem);
-    const targetIndex = items.indexOf(targetItem);
+    const items     = Array.from(container.children);
+    const fromIdx   = items.indexOf(this.draggedItem);
+    const toIdx     = items.indexOf(targetItem);
 
-    if (draggedIndex > targetIndex) {
+    if (fromIdx > toIdx) {
       container.insertBefore(this.draggedItem, targetItem);
     } else {
       container.insertBefore(this.draggedItem, targetItem.nextSibling);
@@ -116,146 +148,113 @@ export default class PbDraggable extends PbEnhancedElement {
 
   handleMultiContainerDragEnter(event) {
     const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
-    const targetItem = event.target.closest('.pb_draggable_item');
-
+    const targetItem      = event.target.closest(".pb_draggable_item");
     if (!targetContainer) return;
 
-    // If we're entering a container directly or there's no target item
     if (!targetItem) {
-      const lastItem = targetContainer.querySelector('.pb_draggable_item:last-child');
-      if (lastItem) {
-        targetContainer.insertBefore(this.draggedItem, lastItem.nextSibling);
-      } else {
-        targetContainer.appendChild(this.draggedItem);
-      }
+      const last = targetContainer.querySelector(".pb_draggable_item:last-child");
+      last
+        ? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
+        : targetContainer.appendChild(this.draggedItem);
       return;
     }
 
-    const container = targetItem.parentNode;
-    const items = Array.from(container.children);
-
-    const newItems = [...items].map(item => ({
-      id: item.id,
-      container: container.id
-    }));
-
-    this.setState({ items: newItems });
+    const items = Array.from(targetContainer.children);
+    this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
 
-    const rect = targetItem.getBoundingClientRect();
-    const middleY = rect.top + rect.height / 2;
+    const midY = targetItem.getBoundingClientRect().top +
+                 targetItem.getBoundingClientRect().height / 2;
 
-    if (event.clientY < middleY) {
-      container.insertBefore(this.draggedItem, targetItem);
+    if (event.clientY < midY) {
+      targetContainer.insertBefore(this.draggedItem, targetItem);
     } else {
-      container.insertBefore(this.draggedItem, targetItem.nextSibling);
+      targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
     }
   }
 
+  /* ---------------- DRAG OVER ---------------- */
   handleDragOver(event) {
     event.preventDefault();
     event.stopPropagation();
-
-    if (this.hasMultipleContainers) {
-      this.handleMultiContainerDragOver(event);
-    } else {
-      this.handleSingleContainerDragOver(event);
-    }
+    this.hasMultipleContainers
+      ? this.handleMultiContainerDragOver(event)
+      : this.handleSingleContainerDragOver(event);
   }
 
   handleSingleContainerDragOver(event) {
     const container = event.target.closest(DRAGGABLE_CONTAINER);
-    if (container) {
-      container.classList.add("active_container");
-    }
+    if (container) container.classList.add("active_container");
   }
 
   handleMultiContainerDragOver(event) {
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
-    if (container) {
-      this.setState({ activeContainer: container.id });
-      container.classList.add("active_container");
-
-      // If dragging over empty container or below last item
-      const lastItem = container.querySelector('.pb_draggable_item:last-child');
-      if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
-        if (this.draggedItem && this.draggedItem.parentNode !== container) {
-          container.appendChild(this.draggedItem);
-        }
+    const container = event.target.matches(DRAGGABLE_CONTAINER)
+      ? event.target
+      : event.target.closest(DRAGGABLE_CONTAINER);
+    if (!container) return;
+
+    this.setState({ activeContainer: container.id });
+    container.classList.add("active_container");
+
+    const last = container.querySelector(".pb_draggable_item:last-child");
+    if (!last || event.clientY > last.getBoundingClientRect().bottom) {
+      if (this.draggedItem && this.draggedItem.parentNode !== container) {
+        container.appendChild(this.draggedItem);
       }
     }
   }
 
+  /* ---------------- DROP ---------------- */
   handleDrop(event) {
     event.preventDefault();
     event.stopPropagation();
 
-    let container;
-    if (event.target.matches(DRAGGABLE_CONTAINER)) {
-      container = event.target;
-    } else {
-      container = event.target.closest(DRAGGABLE_CONTAINER);
-    }
-
+    const container = event.target.matches(DRAGGABLE_CONTAINER)
+      ? event.target
+      : event.target.closest(DRAGGABLE_CONTAINER);
     if (!container || !this.draggedItem) return;
 
     container.classList.remove("active_container");
-    this.draggedItem.style.opacity = '1';
+    this.draggedItem.style.opacity = "1";
 
     // Handle empty containers
-    if (this.hasMultipleContainers && !container.querySelector('.pb_draggable_item')) {
+    if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
       container.appendChild(this.draggedItem);
     }
 
     // Updated order of items as an array of item IDs
-    const reorderedItems = Array.from(
-      this.element.querySelectorAll('.pb_draggable_item')
-    ).map(item => ({
-      id: item.id,
-      container: item.closest(DRAGGABLE_CONTAINER).id
-    }));
-
-    // Store reordered items in a data attribute on the container
-    container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
+    const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
+      .map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
 
-    const customEvent = new CustomEvent('pb-draggable-reorder', {
-      detail: {
-        reorderedItems,
-        containerId: container.id,
-      }
-    });
-
-    this.element.dispatchEvent(customEvent);
-
-    this.setState({
-      items: reorderedItems,
-      isDragging: "",
-      activeContainer: ""
-    });
+    container.dataset.reorderedItems = JSON.stringify(reorderedItems);
+    this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
+      detail: { reorderedItems, containerId: container.id },
+    }));
 
-    this.draggedItem = null;
+    this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
+    this.draggedItem   = null;
     this.draggedItemId = null;
   }
 
+  /* ---------------- DRAG END ---------------- */
   handleDragEnd(event) {
-    event.target.classList.remove("is_dragging");
-    event.target.style.opacity = '1';
+    event.target.classList.remove(
+      "is_dragging",
+      `drop_zone_${this.dragZoneType}`,
+      `drop_zone_color_${this.dragZoneColor}`,
+    );
+    event.target.style.opacity = "1";
+
+    if (this.dragGhost) {
+      document.body.removeChild(this.dragGhost);
+      this.dragGhost = null;
+    }
 
-    this.setState({
-      isDragging: "",
-      activeContainer: ""
-    });
+    this.setState({ isDragging: "", activeContainer: "" });
 
-    this.draggedItem = null;
-    this.draggedItemId = null;
+    this.element.querySelectorAll(DRAGGABLE_CONTAINER)
+      .forEach(c => c.classList.remove("active_container"));
 
-    this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => {
-      container.classList.remove("active_container");
-    });
+    this.draggedItem   = null;
+    this.draggedItemId = null;
   }
 }