feat(useDragScroll): new function

packages/core/index.ts

@@ -36,6 +36,7 @@ export * from './useDevicePixelRatio'
 export * from './useDevicesList'
 export * from './useDisplayMedia'
 export * from './useDocumentVisibility'
+export * from './useDragScroll'
 export * from './useDraggable'
 export * from './useDropZone'
 export * from './useElementBounding'

packages/core/useDragScroll/component.ts

@@ -0,0 +1,15 @@
+import { defineComponent, h, reactive, ref } from 'vue-demi'
+import type { RenderableComponent } from '@vueuse/core'
+import { useDragScroll } from '@vueuse/core'
+
+export const UseDragScroll = /* #__PURE__ */ defineComponent<RenderableComponent>({
+  props: ['as'] as unknown as undefined,
+  setup(props, { slots }) {
+    const target = ref()
+    const data = reactive(useDragScroll(target))
+    return () => {
+      if (slots.default)
+        return h(props.as || 'div', { ref: target }, slots.default(data))
+    }
+  },
+})

packages/core/useDragScroll/demo.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDragScroll } from '@vueuse/core'
+import { UseDragScroll } from './component'
+
+const elRef = ref<HTMLElement | null>(null)
+const imgRef = ref<HTMLElement | null>(null)
+useDragScroll(elRef)
+useDragScroll(imgRef)
+</script>
+
+<template>
+  <div class="flex gap-10">
+    <div ref="elRef" class="w-300px h-300px overflow-auto">
+      <p class="w-500px h-500px">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, distinctio, rem! Asperiores autem beatae,
+        consectetur deserunt ex exercitationem libero maiores nemo nihil non placeat quo reprehenderit ullam vel, vero
+        voluptas voluptates! Aspernatur autem dolorem ducimus, ea, expedita illum laboriosam molestiae nesciunt nisi odit
+        perspiciatis provident rem sapiente sed suscipit totam!
+      </p>
+    </div>
+    <UseDragScroll class="w-300px h-300px overflow-auto">
+      <img
+        class="w-500px h-500px max-w-500px"
+        src="https://source.unsplash.com/random/500x500
+"
+      >
+    </UseDragScroll>
+  </div>
+</template>

packages/core/useDragScroll/index.md

@@ -0,0 +1,40 @@
+---
+category: Elements
+---
+
+# useDragScroll
+
+Make elements draggable scrolling.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useDragScroll } from '@vueuse/core'
+
+const el = ref<HTMLElement | null>(null)
+
+useDragScroll(el)
+</script>
+
+<template>
+  <div ref="el" :style="{ width: '300px', height: '300px', overflow: 'auto' }">
+    <p :style="{ width: '500px', height: '500px' }">
+      <!--   content    -->
+    </p>
+  </div>
+</template>
+```
+
+## Component Usage
+
+```vue
+<template>
+  <UseDragScroll :style="{ width: '300px', height: '300px', overflow: 'auto' }">
+    <p :style="{ width: '500px', height: '500px' }">
+      <!--   content    -->
+    </p>
+  </UseDragScroll>
+</template>
+```

packages/core/useDragScroll/index.ts

@@ -0,0 +1,38 @@
+import { type MaybeRefOrGetter, toValue } from '@vueuse/shared'
+import { ref } from 'vue-demi'
+import { useEventListener } from '../useEventListener'
+
+/**
+ * Make elements draggable scrolling.
+ *
+ * @see https://vueuse.org/useDragScroll
+ */
+export function useDragScroll(target: MaybeRefOrGetter<HTMLElement | null | undefined>) {
+  let lastClientX: number
+  let lastClientY: number
+  const isScrolling = ref(false)
+  useEventListener(target, 'mousedown', (e) => {
+    isScrolling.value = true
+    e.preventDefault()
+    lastClientX = e.clientX
+    lastClientY = e.clientY
+  })
+
+  useEventListener('mouseup', () => {
+    isScrolling.value = false
+  })
+
+  useEventListener('mousemove', (e) => {
+    if (!isScrolling.value)
+      return false
+    const { clientX, clientY } = e
+    const el = toValue(target)!
+    el.scrollBy(lastClientX - clientX, lastClientY - clientY)
+    lastClientX = clientX
+    lastClientY = clientY
+  })
+
+  return {
+    isScrolling,
+  }
+}