positionedClass -> installedClass

app/assets/stylesheets/bubbles.css

@@ -401,7 +401,7 @@
   visibility: hidden;
 }
 
-.bubbles-list__divider--positioned {
+.bubbles-list__divider--installed {
   visibility: visible;
 }
 

app/javascript/controllers/divider_controller.js

@@ -5,7 +5,7 @@ const DIVIDER_ITEM_NODE_NAME = "LI"
 
 export default class extends Controller {
   static targets = [ "divider", "dragImage", "count" ]
-  static classes = [ "positioned" ]
+  static classes = [ "installed" ]
   static values = { startCount: Number, maxCount: Number }
 
   connect() {
@@ -14,7 +14,7 @@ export default class extends Controller {
 
   install() {
     this.#moveDividerTo(this.startCountValue)
-    this.dividerTarget.classList.add(this.positionedClass)
+    this.dividerTarget.classList.add(this.installedClass)
   }
 
   configureDrag(event) {
@@ -25,6 +25,12 @@ export default class extends Controller {
     }
   }
 
+  acceptDrop(event) {
+    if (event.dataTransfer.types.includes(MOVE_ITEM_DATA_TYPE)) {
+      event.preventDefault()
+    }
+  }
+
   moveDivider({ target }) {
     if (target.nodeName == DIVIDER_ITEM_NODE_NAME) {
       this.#moveDividerTo(this.#items.indexOf(target))
@@ -35,11 +41,6 @@ export default class extends Controller {
     // TODO
   }
 
-  acceptDrop(event) {
-    const isDroppable = event.dataTransfer.types.includes(MOVE_ITEM_DATA_TYPE)
-    if (isDroppable) event.preventDefault()
-  }
-
   #moveDividerTo(index) {
     if (index <= this.maxCountValue) {
       if (this.#dividerIndex < index) {

app/views/bubbles/index.html.erb

@@ -38,7 +38,7 @@
       data-controller="divider"
       data-divider-start-count-value="10"
       data-divider-max-count-value="10"
-      data-divider-positioned-class="bubbles-list__divider--positioned"
+      data-divider-installed-class="bubbles-list__divider--installed"
       data-action="turbo:morph@document->divider#install dragstart->divider#configureDrag dragenter->divider#acceptDrop dragover->divider#acceptDrop dragover->divider#moveDivider drop->divider#persist">
     <%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %>
     <%= render "bubbles/list/divider", filter: @filter %>