\r\n```\r\n\r\nThese are just some personal suggestions, welcome to discuss them together",[],1204,"Suggestion: Is vueuse consider to create some directives?","2022-01-31T00:43:08Z","https://github.com/vueuse/vueuse/issues/1204",0.7182552,{"description":3123,"labels":3124,"number":3125,"owner":3067,"repository":3068,"state":3101,"title":3126,"updated_at":3127,"url":3128,"score":3129},"Hi I follow the doc using drag configuration like below\r\n\r\n``` js\r\nuseGesture(\r\n {\r\n onDrag: (ctx) => handleDrag(ctx),\r\n onDragEnd: (ctx) => handleDragEnd(ctx),\r\n },\r\n {\r\n domTarget: sheetRef,\r\n drag: {\r\n filterTaps: true,\r\n preventWindowScrollY: true,\r\n useTouch: true,\r\n delay: 1000, // test\r\n },\r\n }\r\n);\r\n```\r\n\r\nhowever, it seems to not apply at all. I test the delay and preventWindowScrollY it still does not work. I follow the doc [here](https://gesture.vueuse.org/use-gesture.html#configuration) \r\n\r\nAm I missing anything?\r\n\r\n````",[],14,"Drag config option does not work","2022-05-17T09:38:14Z","https://github.com/vueuse/gesture/issues/14",0.7191501,{"description":3131,"labels":3132,"number":3136,"owner":3067,"repository":3067,"state":3101,"title":3137,"updated_at":3138,"url":3139,"score":3140},"### Clear and concise description of the problem\r\n\r\nI am using VueUse for a big SPA in my company. I was using [https://github.com/SortableJS/Vue.Draggable](url) for my Vue 2 projects and tried to use it too on this Vue 3 project. \r\n\r\nUnfortunately, the project looks abandoned and seems to support only the Option API.\r\n\r\nI'm opening this issue to share with you the solution I coded and discuss if this feature is desired. \r\n\r\n### Suggested solution\r\n\r\nSo I coded a composable based on the SortableJS library. Here it is : \r\n\r\n```ts\r\nimport { MaybeElementRef, MaybeRef } from \"@vueuse/core\";\r\nimport SortableJS from 'sortablejs';\r\nimport { Ref } from \"vue\";\r\n\r\nexport function useSortable\u003CT extends Record\u003Cstring, unknown>>(\r\n el: MaybeElementRef, \r\n vmodel: Ref\u003CT[]>,\r\n options?: MaybeRef\u003CSortableJS.SortableOptions>\r\n) {\r\n const instance = ref\u003CSortableJS>();\r\n const internalVmodel = toReactive(vmodel);\r\n\r\n function onMove(event: SortableJS.MoveEvent) {\r\n const _options = unref(options);\r\n return _options?.onMove ? _options.onMove.call(event, event, event) : true && event.related.dataset.sortableFooter === undefined;\r\n }\r\n\r\n function onEnd(event: SortableJS.SortableEvent) {\r\n const _options = unref(options);\r\n if(_options?.onEnd)\r\n _options.onEnd.call(event, event);\r\n\r\n if(event.newDraggableIndex !== undefined && event.oldDraggableIndex !== undefined) {\r\n [internalVmodel[event.oldDraggableIndex], internalVmodel[event.newDraggableIndex]] = [internalVmodel[event.newDraggableIndex], internalVmodel[event.oldDraggableIndex]];\r\n }\r\n }\r\n\r\n function init() {\r\n if(instance.value)\r\n instance.value.destroy();\r\n\r\n const _el = unrefElement(el);\r\n const _options = unref(options);\r\n\r\n if(_el instanceof HTMLElement) {\r\n instance.value = new SortableJS(_el, {\r\n ...(_options ?? {}),\r\n filter: \"[data-sortable-footer]\",\r\n onMove,\r\n onEnd\r\n });\r\n }\r\n }\r\n\r\n const stopWatch = [\r\n watch(() => unref(el), init),\r\n watch(() => unref(options), init)\r\n ];\r\n\r\n tryOnBeforeUnmount(() => stopWatch.forEach(watch => watch()));\r\n\r\n return instance;\r\n}\r\n```\r\n\r\nAs you can see, it's really scoped for my project, and probablyneed some changes to be more universal\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nThis is my first issue here, so feel free to correct me if I made mistakes. (And english is not my native language, so I probably made some grammatical errors)\r\n\r\n### Validations\r\n\r\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://vueuse.org/guide).\r\n- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.",[3133],{"name":3134,"color":3135},"enhancement","a2eeef",1648,"feat(useSortable): Sortable JS integration","2023-02-20T15:00:55Z","https://github.com/vueuse/vueuse/issues/1648",0.72435105,{"description":3142,"labels":3143,"number":93,"owner":3067,"repository":3144,"state":3101,"title":3145,"updated_at":3146,"url":3147,"score":3148},"is this just like [ahook](https://ahooks.js.org/hooks/ui/use-drop) but for vue3.\r\n\r\nI think that's pretty cool,\r\n\r\ncan add some common things in this project in todo list. for example drop-down or counter",[],"vue-demi","is this just like ahook?","2020-07-01T14:56:40Z","https://github.com/vueuse/vue-demi/issues/1",0.7264314,["Reactive",3150],{},["Set"],["ShallowReactive",3153],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fFWDTyZDLdPeG3m7MNj5gitO9Zz440UedcQBmYfdGfYQ":-1},"/vueuse/gesture/4"]