bfg-common 1.5.697 → 1.5.699

package/components/atoms/sortableView/SortableView.vue

@@ -1,528 +1,528 @@
-<template>
-  <div :style="{ height: portletsContainerHeight }" class="portlets">
-    <div class="col drop-zone drop-zone-1">
-      <template v-for="item in firstCol" :key="item.id">
-        <div
-          v-if="visibleDropAreaId === `before-${item.id}`"
-          :class="[
-            'drop-area',
-            themeMode,
-            { 'selected-drop-area': !!visibleDropAreaId },
-          ]"
-          data-position="before"
-        ></div>
-        <div
-          :id="`item-${item.id}`"
-          :class="['portlet-js portlet-container', themeMode]"
-          :data-id="item.id"
-          :style="item.id === draggedPortletId && style"
-          @mousedown="onmousedown($event, item)"
-        >
-          <slot :portlet-id="item.id"></slot>
-        </div>
-        <div
-          v-if="visibleDropAreaId === `after-${item.id}`"
-          :class="[
-            'drop-area',
-            themeMode,
-            { 'selected-drop-area': !!visibleDropAreaId },
-          ]"
-          data-position="after"
-        ></div>
-      </template>
-      <div
-        v-if="isShowDropAreaFirstCol"
-        :class="[
-          'drop-area',
-          themeMode,
-          { 'selected-drop-area': !!visibleDropAreaId },
-        ]"
-        data-position="after"
-      ></div>
-    </div>
-
-    <div class="col drop-zone drop-zone-2">
-      <template v-for="item in secondCol" :key="item.id">
-        <div
-          v-if="visibleDropAreaId === `before-${item.id}`"
-          :class="[
-            'drop-area',
-            themeMode,
-            { 'selected-drop-area': !!visibleDropAreaId },
-          ]"
-          data-position="before"
-        ></div>
-        <div
-          :id="`item-${item.id}`"
-          :class="['portlet-js portlet-container', themeMode]"
-          :data-id="item.id"
-          :style="item.id === draggedPortletId && style"
-          @mousedown="onmousedown($event, item)"
-        >
-          <slot :portlet-id="item.id"></slot>
-        </div>
-        <div
-          v-if="visibleDropAreaId === `after-${item.id}`"
-          :class="[
-            'drop-area',
-            themeMode,
-            { 'selected-drop-area': !!visibleDropAreaId },
-          ]"
-          data-position="after"
-        ></div>
-      </template>
-      <div
-        v-if="isShowDropAreaSecondCol"
-        :class="[
-          'drop-area',
-          themeMode,
-          { 'selected-drop-area': !!visibleDropAreaId },
-        ]"
-        data-position="after"
-      ></div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_T_PortletsList,
-  UI_T_ExpectedHTMLElement,
-} from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/types'
-import type {
-  UI_I_Style,
-  UI_I_Portlet,
-  UI_I_DropArea,
-} from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
-import { UI_E_Position } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/enums'
-
-const props = withDefaults(
-  defineProps<{
-    name: string
-    portlets: UI_I_Portlet[]
-    updatable?: boolean
-  }>(),
-  {
-    updatable: undefined,
-  }
-)
-const emits = defineEmits<{
-  (event: 'update'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const portletsLocal = ref<UI_I_Portlet[]>([])
-
-const setPortlets = (): void => {
-  portletsLocal.value = useDeepCopy(
-    props.portlets.map((portlet: UI_I_Portlet) => ({
-      ...portlet,
-      isDragged: false,
-    }))
-  )
-}
-setPortlets()
-
-const themeMode = computed<string>(
-  () => $store.getters['main/getThemeMode'] || useLocalStorage('themeMode')
-)
-
-watch(
-  () => props.portlets,
-  (newValue: UI_I_Portlet[]) => {
-    if (newValue.length) setPortlets()
-  }
-)
-
-const containerHeight = ref<number | null>(null)
-
-const draggedPortletId = ref<string>('')
-const visibleDropAreaId = ref<string>('')
-const style = ref<UI_I_Style>({})
-const dropArea = ref<UI_I_DropArea>({
-  id: '-1',
-  position: 'initial',
-  list: 0,
-})
-
-const firstCol = computed<UI_I_Portlet[]>(() =>
-  portletsLocal.value.filter((portlet: UI_I_Portlet) => portlet.list === 1)
-)
-
-const secondCol = computed<UI_I_Portlet[]>(() =>
-  portletsLocal.value.filter((portlet: UI_I_Portlet) => portlet.list === 2)
-)
-
-let portletHTMLElement: UI_T_ExpectedHTMLElement = null
-
-const isShowDropAreaFirstCol = computed<boolean>(() => {
-  return (
-    visibleDropAreaId.value === 'after-list-1' &&
-    (!firstCol.value.length ||
-      (firstCol.value.length === 1 &&
-        firstCol.value[0].id === draggedPortletId.value))
-  )
-})
-
-const isShowDropAreaSecondCol = computed<boolean>(() => {
-  return (
-    visibleDropAreaId.value === 'after-list-2' &&
-    (!secondCol.value.length ||
-      (secondCol.value.length === 1 &&
-        secondCol.value[0].id === draggedPortletId.value))
-  )
-})
-
-const addStyles = (styles: UI_I_Style): void => {
-  style.value = {
-    ...style.value,
-    ...styles,
-  }
-}
-const removeStyles = (): void => {
-  style.value = null
-}
-const setDragStartedPortletById = (id: string): void => {
-  portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
-    portlet.id === id ? { ...portlet, isDragged: true } : portlet
-  )
-}
-const setDragStoppedPortletById = (id: string): void => {
-  portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
-    portlet.id === id ? { ...portlet, isDragged: false } : portlet
-  )
-}
-
-const getPortletIndexById = (draggedPortletId: string): number =>
-  portletsLocal.value.findIndex(
-    (portlet: UI_I_Portlet) => portlet.id === draggedPortletId
-  )
-
-const makeDropAreaById = (id: string, position: string): void => {
-  visibleDropAreaId.value = `${position}-${id}`
-}
-
-const setDropAreaData = (
-  id: string,
-  position: string,
-  list: UI_T_PortletsList
-): void => {
-  dropArea.value = {
-    id,
-    position,
-    list,
-  }
-}
-
-const moveAt = (
-  pageX: number,
-  pageY: number,
-  shiftX: number,
-  shiftY: number
-): void => {
-  addStyles({
-    left: pageX - shiftX + 'px',
-    top: pageY - shiftY + 'px',
-  })
-}
-
-const portletsContainerHeight = computed<string | null>(() =>
-  containerHeight.value ? `${containerHeight.value}px` : null
-)
-
-const isDraggableAreaOnPortlet = (
-  eventTarget: HTMLElement
-): boolean | undefined =>
-  eventTarget.classList.contains('portlet-titlebar') ||
-  eventTarget.parentElement?.classList.contains('portlet-titlebar')
-
-const setPortletsInLocalStorage = (
-  name: string,
-  value: UI_I_Portlet[]
-): void => {
-  useLocalStorage(`${name}-portlets-positions`, value)
-}
-
-const reset = (): void => {
-  visibleDropAreaId.value = ''
-  draggedPortletId.value = ''
-  isTranslated = false
-  shiftX = 0
-  shiftY = 0
-  dropArea.value = {
-    id: '-1',
-    position: 'initial',
-    list: 0,
-  }
-  portletHTMLElement = null
-  containerHeight.value = null
-  window.onmousemove = null
-}
-
-let isUpdatable = false
-let isTranslated = false
-let shiftX: number
-let shiftY: number
-let downClientX: number
-let downClientY: number
-const styles = ref<CSSStyleDeclaration | null>(null)
-
-const onmousedown = (
-  downEvent: MouseEvent,
-  portletItem: UI_I_Portlet
-): void => {
-  const containerElement: HTMLElement | null =
-    document.querySelector('.portlets')
-  containerHeight.value = containerElement
-    ? containerElement?.clientHeight
-    : null
-
-  portletHTMLElement = document.querySelector(
-    `#item-${portletItem.id}`
-  ) as HTMLElement
-
-  const eventTarget: HTMLElement = downEvent.target as HTMLElement
-
-  if (!portletHTMLElement || !isDraggableAreaOnPortlet(eventTarget)) return
-  styles.value = getComputedStyle(portletHTMLElement)
-  setDragStartedPortletById(portletItem.id)
-
-  const { left, top } = portletHTMLElement.getBoundingClientRect()
-  downClientX = downEvent.clientX
-  downClientY = downEvent.clientY
-  shiftX = downEvent.clientX - left
-  shiftY = downEvent.clientY - top
-
-  draggedPortletId.value = portletItem.id
-
-  moveAt(downEvent.pageX, downEvent.pageY, shiftX, shiftY)
-  window.onmousemove = (ev): void => onmousemove(ev, portletItem.id)
-}
-
-let onmousemove = (moveEvent: MouseEvent, currentPortletId: string): void => {
-  moveEvent.stopPropagation()
-  moveEvent.preventDefault()
-  moveEvent.cancelBubble = true
-
-  if (
-    isTranslated ||
-    Math.abs(downClientX - moveEvent.clientX) > 10 ||
-    Math.abs(downClientY - moveEvent.clientY) > 10
-  ) {
-    if (!isTranslated && styles.value.width && styles.value.height) {
-      addStyles({
-        width: styles.value.width,
-        height: styles.value.height,
-        position: 'fixed',
-        zIndex: '1000',
-        transform: 'translateX(10px)',
-        cursor: 'move',
-      })
-
-      makeDropAreaById(currentPortletId, 'before')
-      isTranslated = true
-    }
-
-    moveAt(moveEvent.pageX, moveEvent.pageY, shiftX, shiftY)
-
-    if (!portletHTMLElement) {
-      reset()
-      return
-    }
-
-    portletHTMLElement.hidden = true
-    const caughtElement: UI_T_ExpectedHTMLElement = document.elementFromPoint(
-      moveEvent.clientX,
-      moveEvent.clientY
-    ) as HTMLElement
-    portletHTMLElement.hidden = false
-    const caughtPortletElement: UI_T_ExpectedHTMLElement =
-      caughtElement?.closest('.portlet-js')
-    const caughtListElement: UI_T_ExpectedHTMLElement =
-      caughtElement?.closest('.drop-zone')
-    const list = caughtListElement?.classList.contains('drop-zone-1') ? 1 : 2
-
-    const container: UI_T_ExpectedHTMLElement =
-      document.querySelector('.content')
-
-    const boundingRect = container?.getBoundingClientRect()
-    let scrollTop = container?.scrollTop as number
-    const scrollHeight = container?.scrollHeight as number
-    const clientHeight = container?.clientHeight as number
-
-    if (container && boundingRect) {
-      if (boundingRect.top + 20 > moveEvent.pageY && scrollTop > 0) {
-        const nextScroll: number = scrollTop - 200
-        container?.scrollTo({
-          top: scrollTop === 0 ? 0 : nextScroll,
-          behavior: 'smooth',
-        })
-        scrollTop = nextScroll
-      }
-      if (boundingRect.bottom - 20 < moveEvent.pageY) {
-        const nextScroll: number = scrollTop + clientHeight + 200
-        scrollTop = nextScroll > scrollHeight ? scrollHeight : nextScroll
-        container?.scrollTo({ top: scrollTop, behavior: 'smooth' })
-      }
-    }
-
-    const portletsInCaughtList: UI_I_Portlet[] = portletsLocal.value.filter(
-      (el: UI_I_Portlet) => el.list === list
-    )
-    const hasNotPortletInList = !portletsInCaughtList.length
-    const isOnlyOneMemberOfList =
-      portletsInCaughtList.length === 1 &&
-      portletsInCaughtList[0].id === currentPortletId
-
-    if (caughtPortletElement && caughtListElement) {
-      const fromTopToMouseY = moveEvent.clientY
-      const fromTopToElementY = caughtPortletElement.getClientRects().item(0)?.y
-
-      const elementHeight = caughtPortletElement.offsetHeight
-      const caughtPortletId = caughtPortletElement.dataset.id
-
-      if (fromTopToElementY && caughtPortletId) {
-        if (fromTopToMouseY - fromTopToElementY < elementHeight / 2) {
-          makeDropAreaById(caughtPortletId, 'before')
-          setDropAreaData(caughtPortletId, 'before', list)
-        } else {
-          makeDropAreaById(caughtPortletId, 'after')
-          setDropAreaData(caughtPortletId, 'after', list)
-        }
-      }
-    } else if (
-      caughtListElement &&
-      (hasNotPortletInList || isOnlyOneMemberOfList)
-    ) {
-      makeDropAreaById(`list-${list}`, 'after')
-      setDropAreaData('3', 'after', list)
-    }
-  }
-}
-onmousemove = useThrottle(onmousemove)
-
-const dropPortlet = (
-  position: UI_E_Position,
-  indexOfDraggedPortlet: number,
-  dropAreaId: string,
-  dropAreaList: UI_T_PortletsList
-): void => {
-  const splicedData: UI_I_Portlet = portletsLocal.value.splice(
-    indexOfDraggedPortlet,
-    1
-  )[0]
-  const indexOfDropArea = getPortletIndexById(dropAreaId)
-  portletsLocal.value.splice(indexOfDropArea + position, 0, {
-    ...splicedData,
-    list: dropAreaList,
-  })
-}
-
-const onmouseup = (_event: MouseEvent): void => {
-  const dropAreaPosition = dropArea.value.position
-  const dropAreaId = dropArea.value.id
-  const dropAreaList = dropArea.value.list
-
-  if (!draggedPortletId.value) {
-    window.onmousemove = null
-    reset()
-    return
-  }
-  if (dropAreaPosition !== 'initial') {
-    const indexOfDraggedPortlet = getPortletIndexById(draggedPortletId.value)
-    const hasNotPortletArea = !portletsLocal.value.find(
-      (portlet: UI_I_Portlet) => portlet.list === dropAreaList
-    )
-    if (hasNotPortletArea)
-      portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
-        portlet.id === draggedPortletId.value
-          ? {
-              ...portlet,
-              list: dropAreaList,
-            }
-          : portlet
-      )
-
-    dropAreaPosition === 'before' &&
-      dropPortlet(
-        UI_E_Position.BEFORE,
-        indexOfDraggedPortlet,
-        dropAreaId,
-        dropAreaList
-      )
-    dropAreaPosition === 'after' &&
-      dropPortlet(
-        UI_E_Position.AFTER,
-        indexOfDraggedPortlet,
-        dropAreaId,
-        dropAreaList
-      )
-  }
-
-  isUpdatable = true
-  removeStyles()
-  setDragStoppedPortletById(draggedPortletId.value)
-  reset()
-  setPortletsInLocalStorage(props.name, portletsLocal.value)
-}
-
-onUpdated(() => {
-  if (!props.updatable) return
-
-  isUpdatable && emits('update')
-  isUpdatable = false
-})
-
-onMounted(() => {
-  document.addEventListener('mouseup', onmouseup)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('mouseup', onmouseup)
-})
-</script>
-
-<style scoped lang="scss">
-.portlets {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 10px;
-  margin-top: 10px;
-
-  .col {
-    width: 100%;
-
-    .portlet-container.dark-theme {
-      background-color: #1b2a32;
-      border-radius: 3px;
-    }
-
-    .health-status {
-      &__item {
-        display: grid;
-        grid-template-columns: 14px 40% 60%;
-      }
-      &__heading {
-        color: var(--global-text-color3) !important;
-      }
-    }
-
-    .drop-area {
-      box-sizing: border-box;
-      width: 100%;
-      height: 35px;
-      border: 1px solid #e7e7e7;
-      background-color: #f2f8fc;
-      border-radius: 4px;
-      margin: 0 0 12px;
-
-      &.dark-theme {
-        border: 1px solid black;
-        background-color: #f2f8fc;
-        opacity: 0.5;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div :style="{ height: portletsContainerHeight }" class="portlets">
+    <div class="col drop-zone drop-zone-1">
+      <template v-for="item in firstCol" :key="item.id">
+        <div
+          v-if="visibleDropAreaId === `before-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="before"
+        ></div>
+        <div
+          :id="`item-${item.id}`"
+          :class="['portlet-js portlet-container', themeMode]"
+          :data-id="item.id"
+          :style="item.id === draggedPortletId && style"
+          @mousedown="onmousedown($event, item)"
+        >
+          <slot :portlet-id="item.id"></slot>
+        </div>
+        <div
+          v-if="visibleDropAreaId === `after-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="after"
+        ></div>
+      </template>
+      <div
+        v-if="isShowDropAreaFirstCol"
+        :class="[
+          'drop-area',
+          themeMode,
+          { 'selected-drop-area': !!visibleDropAreaId },
+        ]"
+        data-position="after"
+      ></div>
+    </div>
+
+    <div class="col drop-zone drop-zone-2">
+      <template v-for="item in secondCol" :key="item.id">
+        <div
+          v-if="visibleDropAreaId === `before-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="before"
+        ></div>
+        <div
+          :id="`item-${item.id}`"
+          :class="['portlet-js portlet-container', themeMode]"
+          :data-id="item.id"
+          :style="item.id === draggedPortletId && style"
+          @mousedown="onmousedown($event, item)"
+        >
+          <slot :portlet-id="item.id"></slot>
+        </div>
+        <div
+          v-if="visibleDropAreaId === `after-${item.id}`"
+          :class="[
+            'drop-area',
+            themeMode,
+            { 'selected-drop-area': !!visibleDropAreaId },
+          ]"
+          data-position="after"
+        ></div>
+      </template>
+      <div
+        v-if="isShowDropAreaSecondCol"
+        :class="[
+          'drop-area',
+          themeMode,
+          { 'selected-drop-area': !!visibleDropAreaId },
+        ]"
+        data-position="after"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_T_PortletsList,
+  UI_T_ExpectedHTMLElement,
+} from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/types'
+import type {
+  UI_I_Style,
+  UI_I_Portlet,
+  UI_I_DropArea,
+} from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/interfaces'
+import { UI_E_Position } from '~/node_modules/bfg-uikit/components/ui/portlet/lib/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    portlets: UI_I_Portlet[]
+    updatable?: boolean
+  }>(),
+  {
+    updatable: undefined,
+  }
+)
+const emits = defineEmits<{
+  (event: 'update'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const portletsLocal = ref<UI_I_Portlet[]>([])
+
+const setPortlets = (): void => {
+  portletsLocal.value = useDeepCopy(
+    props.portlets.map((portlet: UI_I_Portlet) => ({
+      ...portlet,
+      isDragged: false,
+    }))
+  )
+}
+setPortlets()
+
+const themeMode = computed<string>(
+  () => $store.getters['main/getThemeMode'] || useLocalStorage('themeMode')
+)
+
+watch(
+  () => props.portlets,
+  (newValue: UI_I_Portlet[]) => {
+    if (newValue.length) setPortlets()
+  }
+)
+
+const containerHeight = ref<number | null>(null)
+
+const draggedPortletId = ref<string>('')
+const visibleDropAreaId = ref<string>('')
+const style = ref<UI_I_Style>({})
+const dropArea = ref<UI_I_DropArea>({
+  id: '-1',
+  position: 'initial',
+  list: 0,
+})
+
+const firstCol = computed<UI_I_Portlet[]>(() =>
+  portletsLocal.value.filter((portlet: UI_I_Portlet) => portlet.list === 1)
+)
+
+const secondCol = computed<UI_I_Portlet[]>(() =>
+  portletsLocal.value.filter((portlet: UI_I_Portlet) => portlet.list === 2)
+)
+
+let portletHTMLElement: UI_T_ExpectedHTMLElement = null
+
+const isShowDropAreaFirstCol = computed<boolean>(() => {
+  return (
+    visibleDropAreaId.value === 'after-list-1' &&
+    (!firstCol.value.length ||
+      (firstCol.value.length === 1 &&
+        firstCol.value[0].id === draggedPortletId.value))
+  )
+})
+
+const isShowDropAreaSecondCol = computed<boolean>(() => {
+  return (
+    visibleDropAreaId.value === 'after-list-2' &&
+    (!secondCol.value.length ||
+      (secondCol.value.length === 1 &&
+        secondCol.value[0].id === draggedPortletId.value))
+  )
+})
+
+const addStyles = (styles: UI_I_Style): void => {
+  style.value = {
+    ...style.value,
+    ...styles,
+  }
+}
+const removeStyles = (): void => {
+  style.value = null
+}
+const setDragStartedPortletById = (id: string): void => {
+  portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
+    portlet.id === id ? { ...portlet, isDragged: true } : portlet
+  )
+}
+const setDragStoppedPortletById = (id: string): void => {
+  portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
+    portlet.id === id ? { ...portlet, isDragged: false } : portlet
+  )
+}
+
+const getPortletIndexById = (draggedPortletId: string): number =>
+  portletsLocal.value.findIndex(
+    (portlet: UI_I_Portlet) => portlet.id === draggedPortletId
+  )
+
+const makeDropAreaById = (id: string, position: string): void => {
+  visibleDropAreaId.value = `${position}-${id}`
+}
+
+const setDropAreaData = (
+  id: string,
+  position: string,
+  list: UI_T_PortletsList
+): void => {
+  dropArea.value = {
+    id,
+    position,
+    list,
+  }
+}
+
+const moveAt = (
+  pageX: number,
+  pageY: number,
+  shiftX: number,
+  shiftY: number
+): void => {
+  addStyles({
+    left: pageX - shiftX + 'px',
+    top: pageY - shiftY + 'px',
+  })
+}
+
+const portletsContainerHeight = computed<string | null>(() =>
+  containerHeight.value ? `${containerHeight.value}px` : null
+)
+
+const isDraggableAreaOnPortlet = (
+  eventTarget: HTMLElement
+): boolean | undefined =>
+  eventTarget.classList.contains('portlet-titlebar') ||
+  eventTarget.parentElement?.classList.contains('portlet-titlebar')
+
+const setPortletsInLocalStorage = (
+  name: string,
+  value: UI_I_Portlet[]
+): void => {
+  useLocalStorage(`${name}-portlets-positions`, value)
+}
+
+const reset = (): void => {
+  visibleDropAreaId.value = ''
+  draggedPortletId.value = ''
+  isTranslated = false
+  shiftX = 0
+  shiftY = 0
+  dropArea.value = {
+    id: '-1',
+    position: 'initial',
+    list: 0,
+  }
+  portletHTMLElement = null
+  containerHeight.value = null
+  window.onmousemove = null
+}
+
+let isUpdatable = false
+let isTranslated = false
+let shiftX: number
+let shiftY: number
+let downClientX: number
+let downClientY: number
+const styles = ref<CSSStyleDeclaration | null>(null)
+
+const onmousedown = (
+  downEvent: MouseEvent,
+  portletItem: UI_I_Portlet
+): void => {
+  const containerElement: HTMLElement | null =
+    document.querySelector('.portlets')
+  containerHeight.value = containerElement
+    ? containerElement?.clientHeight
+    : null
+
+  portletHTMLElement = document.querySelector(
+    `#item-${portletItem.id}`
+  ) as HTMLElement
+
+  const eventTarget: HTMLElement = downEvent.target as HTMLElement
+
+  if (!portletHTMLElement || !isDraggableAreaOnPortlet(eventTarget)) return
+  styles.value = getComputedStyle(portletHTMLElement)
+  setDragStartedPortletById(portletItem.id)
+
+  const { left, top } = portletHTMLElement.getBoundingClientRect()
+  downClientX = downEvent.clientX
+  downClientY = downEvent.clientY
+  shiftX = downEvent.clientX - left
+  shiftY = downEvent.clientY - top
+
+  draggedPortletId.value = portletItem.id
+
+  moveAt(downEvent.pageX, downEvent.pageY, shiftX, shiftY)
+  window.onmousemove = (ev): void => onmousemove(ev, portletItem.id)
+}
+
+let onmousemove = (moveEvent: MouseEvent, currentPortletId: string): void => {
+  moveEvent.stopPropagation()
+  moveEvent.preventDefault()
+  moveEvent.cancelBubble = true
+
+  if (
+    isTranslated ||
+    Math.abs(downClientX - moveEvent.clientX) > 10 ||
+    Math.abs(downClientY - moveEvent.clientY) > 10
+  ) {
+    if (!isTranslated && styles.value.width && styles.value.height) {
+      addStyles({
+        width: styles.value.width,
+        height: styles.value.height,
+        position: 'fixed',
+        zIndex: '1000',
+        transform: 'translateX(10px)',
+        cursor: 'move',
+      })
+
+      makeDropAreaById(currentPortletId, 'before')
+      isTranslated = true
+    }
+
+    moveAt(moveEvent.pageX, moveEvent.pageY, shiftX, shiftY)
+
+    if (!portletHTMLElement) {
+      reset()
+      return
+    }
+
+    portletHTMLElement.hidden = true
+    const caughtElement: UI_T_ExpectedHTMLElement = document.elementFromPoint(
+      moveEvent.clientX,
+      moveEvent.clientY
+    ) as HTMLElement
+    portletHTMLElement.hidden = false
+    const caughtPortletElement: UI_T_ExpectedHTMLElement =
+      caughtElement?.closest('.portlet-js')
+    const caughtListElement: UI_T_ExpectedHTMLElement =
+      caughtElement?.closest('.drop-zone')
+    const list = caughtListElement?.classList.contains('drop-zone-1') ? 1 : 2
+
+    const container: UI_T_ExpectedHTMLElement =
+      document.querySelector('.content')
+
+    const boundingRect = container?.getBoundingClientRect()
+    let scrollTop = container?.scrollTop as number
+    const scrollHeight = container?.scrollHeight as number
+    const clientHeight = container?.clientHeight as number
+
+    if (container && boundingRect) {
+      if (boundingRect.top + 20 > moveEvent.pageY && scrollTop > 0) {
+        const nextScroll: number = scrollTop - 200
+        container?.scrollTo({
+          top: scrollTop === 0 ? 0 : nextScroll,
+          behavior: 'smooth',
+        })
+        scrollTop = nextScroll
+      }
+      if (boundingRect.bottom - 20 < moveEvent.pageY) {
+        const nextScroll: number = scrollTop + clientHeight + 200
+        scrollTop = nextScroll > scrollHeight ? scrollHeight : nextScroll
+        container?.scrollTo({ top: scrollTop, behavior: 'smooth' })
+      }
+    }
+
+    const portletsInCaughtList: UI_I_Portlet[] = portletsLocal.value.filter(
+      (el: UI_I_Portlet) => el.list === list
+    )
+    const hasNotPortletInList = !portletsInCaughtList.length
+    const isOnlyOneMemberOfList =
+      portletsInCaughtList.length === 1 &&
+      portletsInCaughtList[0].id === currentPortletId
+
+    if (caughtPortletElement && caughtListElement) {
+      const fromTopToMouseY = moveEvent.clientY
+      const fromTopToElementY = caughtPortletElement.getClientRects().item(0)?.y
+
+      const elementHeight = caughtPortletElement.offsetHeight
+      const caughtPortletId = caughtPortletElement.dataset.id
+
+      if (fromTopToElementY && caughtPortletId) {
+        if (fromTopToMouseY - fromTopToElementY < elementHeight / 2) {
+          makeDropAreaById(caughtPortletId, 'before')
+          setDropAreaData(caughtPortletId, 'before', list)
+        } else {
+          makeDropAreaById(caughtPortletId, 'after')
+          setDropAreaData(caughtPortletId, 'after', list)
+        }
+      }
+    } else if (
+      caughtListElement &&
+      (hasNotPortletInList || isOnlyOneMemberOfList)
+    ) {
+      makeDropAreaById(`list-${list}`, 'after')
+      setDropAreaData('3', 'after', list)
+    }
+  }
+}
+onmousemove = useThrottle(onmousemove)
+
+const dropPortlet = (
+  position: UI_E_Position,
+  indexOfDraggedPortlet: number,
+  dropAreaId: string,
+  dropAreaList: UI_T_PortletsList
+): void => {
+  const splicedData: UI_I_Portlet = portletsLocal.value.splice(
+    indexOfDraggedPortlet,
+    1
+  )[0]
+  const indexOfDropArea = getPortletIndexById(dropAreaId)
+  portletsLocal.value.splice(indexOfDropArea + position, 0, {
+    ...splicedData,
+    list: dropAreaList,
+  })
+}
+
+const onmouseup = (_event: MouseEvent): void => {
+  const dropAreaPosition = dropArea.value.position
+  const dropAreaId = dropArea.value.id
+  const dropAreaList = dropArea.value.list
+
+  if (!draggedPortletId.value) {
+    window.onmousemove = null
+    reset()
+    return
+  }
+  if (dropAreaPosition !== 'initial') {
+    const indexOfDraggedPortlet = getPortletIndexById(draggedPortletId.value)
+    const hasNotPortletArea = !portletsLocal.value.find(
+      (portlet: UI_I_Portlet) => portlet.list === dropAreaList
+    )
+    if (hasNotPortletArea)
+      portletsLocal.value = portletsLocal.value.map((portlet: UI_I_Portlet) =>
+        portlet.id === draggedPortletId.value
+          ? {
+              ...portlet,
+              list: dropAreaList,
+            }
+          : portlet
+      )
+
+    dropAreaPosition === 'before' &&
+      dropPortlet(
+        UI_E_Position.BEFORE,
+        indexOfDraggedPortlet,
+        dropAreaId,
+        dropAreaList
+      )
+    dropAreaPosition === 'after' &&
+      dropPortlet(
+        UI_E_Position.AFTER,
+        indexOfDraggedPortlet,
+        dropAreaId,
+        dropAreaList
+      )
+  }
+
+  isUpdatable = true
+  removeStyles()
+  setDragStoppedPortletById(draggedPortletId.value)
+  reset()
+  setPortletsInLocalStorage(props.name, portletsLocal.value)
+}
+
+onUpdated(() => {
+  if (!props.updatable) return
+
+  isUpdatable && emits('update')
+  isUpdatable = false
+})
+
+onMounted(() => {
+  document.addEventListener('mouseup', onmouseup)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mouseup', onmouseup)
+})
+</script>
+
+<style scoped lang="scss">
+.portlets {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 10px;
+  margin-top: 10px;
+
+  .col {
+    width: 100%;
+
+    .portlet-container.dark-theme {
+      background-color: #1b2a32;
+      border-radius: 3px;
+    }
+
+    .health-status {
+      &__item {
+        display: grid;
+        grid-template-columns: 14px 40% 60%;
+      }
+      &__heading {
+        color: var(--global-text-color3) !important;
+      }
+    }
+
+    .drop-area {
+      box-sizing: border-box;
+      width: 100%;
+      height: 35px;
+      border: 1px solid #e7e7e7;
+      background-color: #f2f8fc;
+      border-radius: 4px;
+      margin: 0 0 12px;
+
+      &.dark-theme {
+        border: 1px solid black;
+        background-color: #f2f8fc;
+        opacity: 0.5;
+      }
+    }
+  }
+}
+</style>