search

Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.72k stars 106 forks source link

如何获取拖拽组件的数据 #100

Open kanocence opened 4 months ago

kanocence commented 4 months ago

如下图：在双列表拖拽的场景下，从左往右拖动时，只允许放置id为偶数的组件

我想使用GroupOptions中的put函数来判断，但是put函数无法获取组件原本的数据

请问使用put函数时如何获取原始列表的数据或者有什么别的处理思路吗 🤔

image

Alfred-Skyblue commented 4 months ago

你可以使用filter让id为奇数的不可以拖动，或者拖动的时候onMove返回false

kanocence commented 4 months ago

你可以使用filter让id为奇数的不可以拖动，或者拖动的时候onMove返回false

上面是一个简化的场景，实际使用的场景比较复杂，使用put来判断比较合理，请问put能实现吗

Alfred-Skyblue commented 4 months ago

不太理解您的使用场景，您可以尝试传递函数

kanocence commented 4 months ago

我现在的处理方式是：

  1. A列表开始拖拽
  2. 根据A列表 on-start 事件的 evt.oldIndex 从列表获取组件的数据
  3. 传递获取组件的数据
  4. 拖拽至 B列表时 put 函数判断是否允许
  5. 拖拽至C列表，D列表等 使用不同的 put 函数判断

虽然也可以使用，但是我想如果能在 put 函数触发时可以获取到当前拖拽的组件数据就能简单一些，不需要再处理获取和传递了

moliyu commented 4 months ago

你可以使用filter让id为奇数的不可以拖动，或者拖动的时候onMove返回false

你可以使用filter让id为奇数的不可以拖动，或者拖动的时候onMove返回false

How can I get sourceData and targetData with onMove event, I want to confirm whether it can be moved to the new item. TK

Aaron-zon commented 4 months ago

put函数中有dragEl，可以通过这个获取目标数据。比如将一个唯一标识设置在拖拽元素上，说拽时通过dargEl获取这个标识，再用这个标识去查找目标数据