Refactoring: moving the draggable code in a common class.

conversejs/custom/plugins/notes/components/muc-notes-view.js

@@ -2,16 +2,14 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import { CustomElement } from 'shared/components/element.js'
 import { api } from '@converse/headless'
 import tplMucNotes from '../templates/muc-notes'
 import { __ } from 'i18n'
+import { DraggablesCustomElement } from '../../../shared/components/draggables/index.js'
 
 import '../styles/muc-notes.scss'
 
-export default class MUCNotesView extends CustomElement {
-  currentDraggedNote = null
-
+export default class MUCNotesView extends DraggablesCustomElement {
   static get properties () {
     return {
       model: { type: Object, attribute: true },
@@ -27,16 +25,16 @@ export default class MUCNotesView extends CustomElement {
       return
     }
 
+    this.draggableTagName = 'livechat-converse-muc-note'
+    this.droppableTagNames = ['livechat-converse-muc-note']
+    this.droppableAlwaysBottomTagNames = []
+
     // Adding or removing a new note: we must update.
     this.listenTo(this.model, 'add', () => this.requestUpdate())
     this.listenTo(this.model, 'remove', () => this.requestUpdate())
     this.listenTo(this.model, 'sort', () => this.requestUpdate())
 
-    // this._handleDragStartBinded = this._handleDragStart.bind(this)
-    // this._handleDragOverBinded = this._handleDragOver.bind(this)
-    // this._handleDragLeaveBinded = this._handleDragLeave.bind(this)
-    // this._handleDragEndBinded = this._handleDragEnd.bind(this)
-    // this._handleDropBinded = this._handleDrop.bind(this)
+    await super.initialize()
   }
 
   render () {
@@ -90,6 +88,29 @@ export default class MUCNotesView extends CustomElement {
       })
     }
   }
+
+  _dropDone (draggedEl, droppedOnEl, onTopHalf) {
+    super._dropDone(...arguments)
+    console.log('[livechat note drag&drop] Note dropped...')
+
+    const note = draggedEl.model
+    if (!note) {
+      throw new Error('No model for the draggedEl')
+    }
+    const targetNote = droppedOnEl.model
+    if (!targetNote) {
+      throw new Error('No model for the droppedOnEl')
+    }
+    if (note === targetNote) {
+      console.log('[livechat note drag&drop] Note dropped on itself, nothing to do')
+      return
+    }
+
+    let newOrder = targetNote.get('order') ?? 0
+    if (!onTopHalf) { newOrder = Math.max(0, newOrder + 1) }
+
+    this._saveOrders(this.model, note, newOrder)
+  }
 }
 
 api.elements.define('livechat-converse-muc-notes', MUCNotesView)

conversejs/custom/plugins/notes/templates/muc-note.js

@@ -11,7 +11,7 @@ export function tplMucNote (el, note) {
 
   return !el.edit
     ? html`
-      <div draggable="true" class="note-line">
+      <div draggable="true" class="note-line draggables-line">
         <div class="note-description">${note.get('description') ?? ''}</div>
         <button class="note-action" title="${__('Edit')}"
           @click=${el.toggleEdit}
@@ -25,7 +25,7 @@ export function tplMucNote (el, note) {
         </button>
       </div>`
     : html`
-      <div class="note-line">
+      <div class="note-line draggables-line">
         <form class="converse-form" @submit=${el.saveNote}>
           ${_tplNoteForm(note)}
           <fieldset class="form-group">