Comments (4)
It seems like the behavior is different for changing sort in the list and when moving things across lists.
For changing order I can find list.value =
set.
https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/main/src/useDraggable.ts#L175
But for the onAdd
and onRemove
, there's no setting of list.value
which seems like a bug to me? It seems like there's a purposeful unRef
and then the native array is sliced (or pushed to). Almost as if to intentionally avoid reactivity?
from vue-draggable-plus.
Noticed this too. Was extremely happy seeing someone took up the torch to keep vue3 up to date with sortablejs. However, using computed wrapper does not work with this package :/
This is how i've done it using the outdated vuedraggable package which i hoped would still work for this but it doesnt..
const request = ref<UpdateCustomerProductAccessRequest>({
customerId: props.customer.id,
productIds: cloneDeep(props.customer.productAccesses),
});
const productsWithoutAccess = computed({
get: () => sortedProducts.value.filter(product => !request.value.productIds.includes(product.id)),
set: (v) => {
v.forEach(product => {
const index = request.value.productIds.indexOf(product.id);
if (index >= 0) {
request.value.productIds.splice(index, 1);
}
});
},
});
const productsWithAccess = computed({
get: () => sortedProducts.value.filter(product => request.value.productIds.includes(product.id)),
set: (v) => {
v.forEach(product => {
const index = request.value.productIds.indexOf(product.id);
if (index < 0) {
request.value.productIds.push(product.id);
}
});
},
});
<div class="flex flex-col flex-1 col-span-6 overflow-hidden">
<p class="text-center text-14 mb-3 font-bold">
No Access
</p>
<Draggable v-model="productsWithoutAccess"
:animation="products.length > 50 ? 0 : 200"
:sort="false"
:disabled="false"
class="flex flex-col gap-3 bg-background p-3 flex-1 border border-border overflow-auto"
:group="{ name: 'product-accesses', pull: true, put: true }"
ghost-class="ghost">
<CustomerProductAccessesProduct v-for="product in productsWithoutAccess" :key="product.id" :product="product"/>
</Draggable>
</div>
<div class="flex flex-col flex-1 col-span-6 overflow-hidden">
<p class="text-center text-14 mb-3 font-bold">
Access
</p>
<Draggable v-model="productsWithAccess"
:animation="products.length > 50 ? 0 : 200"
:sort="false"
:disabled="false"
class="flex flex-col gap-3 bg-background p-3 flex-1 border border-border overflow-auto"
:group="{ name: 'product-accesses', pull: true, put: true }"
ghost-class="ghost">
<CustomerProductAccessesProduct v-for="product in productsWithAccess" :key="product.id" :product="product"/>
</Draggable>
</div>
</div>
the setters are not triggered when moving from list A to list B :/ I could add the data into 2 seperate ref<[]> objects but that requires more boilerplate to ensure they get populated when the api promise returns etc..
from vue-draggable-plus.
+1
from vue-draggable-plus.
I fixed this back then for myself by forking, published here:
https://www.npmjs.com/package/vue-draggable-plus-plus
But beware, I may have broken other functionality while fixing it for my usecase.
(commits: https://github.com/MartinMalinda/vue-draggable-plus/commits/main/)
from vue-draggable-plus.
Related Issues (20)
- 无法导出props参数类型和各个事件的事件对象类型
- 拖拽改变顺序,UI 变了, 但是数据的顺序没变化? HOT 1
- How can I cancel drag ? HOT 1
- Why when you put a <draggable> in a v-for it breaks the animation and the group inside a v-for doesn't work? HOT 1
- 无法导入js HOT 1
- ghostClass and dragClass not applied when v-model not used
- default draggable="true" given `handle`. change to "false" only after drag the given `handle` HOT 1
- 列表中包含可拖动和不可拖动的项,如何做才可以让可拖动的元素无法拖到不可拖动元素上 HOT 6
- Can't drag into SortableJs Instance outside Vue
- `cursor: grabbing` when dragging doesn't apply in Chrome HOT 1
- Suggestion: Log Dragging Direction HOT 5
- v-draggable don't work with option components
- CDN version HOT 2
- 如何与elementui的tab结合,使得tabpane可以拖动排序 HOT 6
- Is there any way to Lock element on the same place? (disable sort)
- suggestion: add a class for aviod dragging HOT 1
- with onUpdate, onAdd can we get index or item as argument to event
- use with defineComponent & tsx,the drag is not work
- Draggable disables editing features of TinyMCE HOT 1
- 两层嵌套VueDraggable,内部VueDraggable组件无法响应update事件? HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-draggable-plus.