hcg1023 / vue3-dnd Goto Github PK

View Code? Open in Web Editor NEW

544.0 544.0 44.0 86.95 MB

React Dnd implementation in Vue Composition-api.

Home Page: https://www.vue3-dnd.com

License: MIT License

JavaScript 0.12% TypeScript 69.69% Vue 29.72% Shell 0.06% HTML 0.17% CSS 0.24%

drag drag-and-drop draggable react-dnd vue vue-dnd

vue3-dnd's Introduction

Vue3 Dn

React Dnd implementation in Vue Composition-api.

Supports Vue2 and Vue3

If you think this project is helpful to you, I hope you can contribute a star⭐

Docs

vue3-dnd.com

Contributors

Made with contrib.rocks.

Thanks

React-Dnd

vue3-dnd's People

Contributors

Stargazers

Watchers

vue3-dnd's Issues

请问可以改变拖拽时鼠标样式吗？比如cursor: grabbing

Plans to support iOS?

I noticed all the demo examples are broken on iPhone, even the simple examples. Is this something thats on the roadmap?

Variable conflict: Cannot read properties of undefined (reading 'NODE_ENV')

框架 Vue3
我在使用过程中，产生了一些有趣的Bug；

问题产生原因：我使用的某个依赖，定义全局global.process属性，于是就产生了这个有趣的报错；

从报错代码片段截图可以看出，有方法进行检测process.env.NODE_ENV, 然而它并不存在。

使用官方demo报错

https://www.vue3-dnd.com/example/dustbin/multiple-targets.html
复制粘贴使用的官方例子，报错。
相关版本使用：
vue3-dnd：2.0.4
vue：3.2.20

vue3-dnd-test-utils, peerDependency "@testing-library/vue": ">= 11" is unknown

Hejhej,
the vue3-dnd-test-utils mention the need of the peerDependency "@testing-library/vue": ">= 11", but the latest version I can find is 7.0.0 (https://github.com/testing-library/vue-testing-library/tags)
Did I'm missing something? Or is this the wrong dependency?
Thx! :)

ts 提示类型错误

拖拽会执行多次onUpdated

`
....
const setRef = (el: HTMLDivElement) => {
card.value = drag(drop(el)) as HTMLDivElement
}

onMounted(() => {
console.log('创建')
})
onUnmounted(() => {
console.log('销毁')
})
onUpdated(() => {
console.log('更新')
})
`
这个代码是examples\04-sortable\simple\Card.vue 里就可以复现的，想知道为什么拖拽会导致更新

使用vue-tsc && vite build编译之后，页面console报错

如题，在vite中新建一个项目之后，使用DndProvider :backend="HTML5Backend"包裹了div之后，直接vite跑起来没有问题，但是在使用vue-tsc && vite build编译之后，在http-server中跑起来访问静态页面时，控制台报错：Invariant Violation: Expected drag drop context

请问这个问题有什么解决办法吗？

You should know before you ask questions

Most of the functions of vue3-dnd depend on react-dnd. If you encounter unknown problems, you can try to find them in the react-dnd community. Of course, you can also ask questions in the vue3-dnd community, and we will answer them as soon as possible.

拖拽源使用element-plus的table组件，导致拖拽源的拖拽预览dom高度超出如何解决？

table的body内容可滑动

超出dom高度依赖于table的body内容的高度

拖拽其他元素对比

缩放功能

能否扩展一下组件，添加一个元素大小缩放的功能呢？

Can't be drag after dragged two times

if i have dragged more than two times, the "draggable" on box would change to false,and then I cant drag it anymore

想实现基于鼠标按下后，移动了指定的x,y距离后再进行拖拽，这个在useDrag的canDrag里获取不到实时的鼠标信息，如何实现这种效果？

如何实现数据拖拽指定距离后，拖拽源才能被拖拽？

请问支持在手机或者平板上触摸拖拽组件吗？

如题，感谢

Dnd Indicator Mode? Can do it?

example: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-pages-layout--horizontal

如何获取Drop所在的DOM节点？

vue3-dnd: 2.0.2
vue: 3.2.37

您好，我有一个问题想请教一下。

我该如何获取drop所在的DOM节点？

const [collectedProps, drop] = useDrop(() => ({...}));

通过:ref="drop"传递给dom节点，在后续的方法中我想通过drop.value获取dom，但是不可行，我从文档中没能确定是否可以通过该方法获取dom。我想获取dom节点之后，通过getClientOffset的值来计算鼠标相对于drop所在节点的相对位置。通常在vue3就是通过ref来绑定获取dom的，但是这里被占用了，我也可以通过直接操作dom来实现，但是我认为该方法不好，您能提供一些建议吗？
@hcg1023

Invariant Violation: Expected targetIds to be registered.

I have issues similar to 763 and 3403 in the current version of the package.

I investigated this issue and concluded that it is necessary to update the dnd-core package (as a dependency) to the latest version.

ERROR
Expected targetIds to be registered.
Invariant Violation: Expected targetIds to be registered.
    at invariant (webpack-internal:///./node_modules/@react-dnd/invariant/dist/esm/index.mjs:26:21)
    at checkInvariants (webpack-internal:///./node_modules/vue3-dnd/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.mjs:40:72)
    at DragDropManagerImpl.hover (webpack-internal:///./node_modules/vue3-dnd/node_modules/dnd-core/dist/esm/actions/dragDrop/hover.mjs:17:9)
    at Object.eval [as hover] (webpack-internal:///./node_modules/vue3-dnd/node_modules/dnd-core/dist/esm/classes/DragDropManagerImpl.mjs:25:46)
    at eval (webpack-internal:///./node_modules/react-dnd-html5-backend/dist/esm/HTML5BackendImpl.mjs:316:38)

vue 3.0 项目中使用报错

关于vue3的toRefs

const [collect, drag] = useDrag(() => ({
  type: ItemTypes.BOX,
  item: () => ({
    name: props.name,
  }),
  end: (item, monitor) => {
    const dropResult = monitor.getDropResult<DropResult>();
    if (item && dropResult) {
      alert(`You dropped ${item.name} into ${dropResult.name}!`);
    }
  },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
    handlerId: monitor.getHandlerId(),
  }),
}));

const { isDragging } = toRefs(collect);

const opacity = computed(() => (unref(isDragging) ? 0.4 : 1));

这一段代码，例子里面是从@vueuse/core导入toRefs函数，但是如果直接从vue3里面引用toRefs函数，最终结果会失去响应式并且提示"expects a reactive object but received a plain one."，但是我针对collect对象使用isRef判断，得出的又是true，很奇怪为什么

useDrag 无法配置beginDrag参数

问题

想要实现控制某个拖拽源（Drag Sources）不可拖拽

想在在canDrag内部调用 monitor.getItem() 来判断当前是否可被拖拽。

但发现canDrag是在item函数之前执行的，所以内部的 monitor.getItem()函数return的一直是null

看了下react-dnd发现可以配置beginDrag参数，它是在canDrag之前来执行的

理想目标

可以配置beginDrag参数，让canDrag内部可以获取到item数据

const [dropCollect, drop] = useDrop({
    accept: ['BOX'],
    collect: monitor => ({
      isOver: monitor.isOver({ shallow: true })
    })
  })

const { isOver } = toRefs(dropCollect)

watch(isOver, val => {
  console.log('val')
})

// true
// false
// true

拖动进入时, 会打印true -> false -> true
请教是什么原因呢

inject() can only be used inside setup() or functional components.
"Invariant Violation: Expected drag drop context"

useDrag 如何实时获得鼠标的 offsetXY ？

文档中提到，end 时，已经不再拖拽了，所以返回的 monitor.getXXXOffset 是 null，但我依然想获得鼠标松开时的坐标，如何做比较好？

hcg1023 / vue3-dnd Goto Github PK

vue3-dnd's Introduction

Vue3 Dn

Docs

Contributors

Thanks

vue3-dnd's People

Contributors

Stargazers

Watchers

Forkers

vue3-dnd's Issues

table的body内容可滑动

超出dom高度依赖于table的body内容的高度

拖拽其他元素对比

问题

理想目标

Recommend Projects

Recommend Topics

Recommend Org

Jobs