I have to do a drag and drop program so i use Vue.Draggable but when i drop my element into the second list the last created element on that list isn't the one i dropped but the one who had the value replaced.
So for instance if i have a drop array like that:
var a = [
{
name: 'element1'
},
{
name: 'element2'
},
...
]
and I drop an element before the first element of the second list, the last created element will be 'element1' and I need my program to make the last created element the one droped
I don't know how Vue.Draggable does that but when I had programmatically
an element somewhere in the second list like so secondList.splice(3, 0, newElement) the last created element is the one i want (newElement)
Here's the code from the first list:
<draggable v-model="blocks" :clone="clone" :options="draggableOptions" #end="reGenerateUuid">
<block
v-for="b in blocks"
:key="b.props.uuid"
:title="b.title"
:image="b.image"
#click.native="addBlock(blocks[key])" />
</draggable>
the second list is a rendered component so I can't share it because it's massive.
The second list doesn't use v-model with the draggable component but the list prop, because from what I understood I can't put a v-model on a rendered element in VueJS.
The elements draggable on the second list doesn't have the key prop because I don't want them to regenerate.
Maybe I need to specify how draggable should add the element to the second list?
Does anyone have an idea?
The elements draggable on the second list doesn't have the key prop
because i don't want them to regenerate.
You need the key prop. Otherwise Vue doesn't properly keep track of the order of elements.
Related
I have a component, which has 4 instances.
User clicks number 2, product B gets selected.
When the dom is re-ordered, later after he selects another option, these 4 instances of the component card-brick are re-ordered (because price changes, so this happens automatically in the flow) all good... except for the fact that the selected element, which was number 2 , moved to position 1.
and... the 2nd element continues to be selected instead of product B!
The ui shows selected product D.
it seems that somehow polymer 2 is ignoring this selected attribute when repainting the DOM. how can I avoid this?
<iron-selector id="something-semantic" attr-for-selected="value" selected={{value}}>
<template is="dom-repeat" items="[[filteredProductosCategorias]]" as="productoCategoria" id="productoTipo">
<div class="card-brick" value="[[productCategoria.id]]" tabindex="1" on-keyup="_seleccionaCategoria">
</div>
</template>
</iron-selector>
the selection is stick to previously selected element in the DOM order. how can I make this selected value to also update don dom changes??
any suggestion to overcome this problem?? users can be confused.
The problem is that dom-repeat doesn't rebuild the elements inside, because that would be a heavy operation. It just assigns new values to child elements, meaning that iron-selector has no clue that the content has changed. In the example, you selected the second element, and after the re-sort, it's still the second element selected.
I'm confused in what _selectCategory does, because if it sets the category, then you probably don't even need iron-selector. I never used that element myself (and would never use it, because it's simple to write it myself). Anyway, if you re-sort using _selectCategory, then just set the new value property with this.set().
Is there a way to cancel drop action of react-beautiful-dnd's Draggable object? I have a list of items with one item to be always at last position.
I want to disable (or at least properly cancel) drop if item is dragged below last item. I know I can exclude last item from droppable component and area, but that's not an option.
It is simple
When you drop any element in the onDragEnd method you'll get an object for destination and source so in that destination you find one index.
This index is referred to as your element at that index in your list of elements.
So you can make one condition there like if your element list length is equal to your index then don't do nothing return from that function.
I have a good history playing with react. But today I faced a very strange issue.
I have a hamburger which receives a list of values and the one of the values is selected which I send from the parent through this.refs.child1.setValues(). this setValues function calls setState and that one value is selected through className parameter in react.
So in the first step I select first value among 20 values.
the react tab shows this about the first li element:
className="{something} +class1"
rest all elements have:
className="{something}"
which is fine. ('class1' is the class which is added dynamically on setstate) and the dom shows first value selected and the rest unselected.
now problem is in the second step as I select another value say 3rd one, so first value should get deselected and 3rd should be selected and the expected react values for 3rd should be
className="{something} + class1" and for the rest its showing className="{something}"
which is working fine in the react tab BUT in the elements tab both the li elements are getting selected as they both have class1 but class1 should be only with the 3rd element not with the first one (which was previously selected)
Since React works by using the Virtual DOM, it only makes changes in the DOM to elements it detects a change to. So, since you're never actually removing a class from the first element, it never does a rerender of it, it only rerenders the third one because that's the only one you actually changed.
You need to do something like this:
removeClass() {
let allLinks = document.querySelectorAll('.something');
allLinks.map((link) => link.classList.remove('class1'));
//and here just call the function to add the class to the right
//element.
}
I'm working on AngularJS, I have a problem as below, I have tried some solutions but they're not working, so I am posting this question here to get support from all of you:
I have two selectbox as below, when I select a parent from parent list, I will have a list of child in child list.
But, when I chose a child in child list, then change parent, as you know, we have a new child list, and chose child is not belong to new list, so we have two selected items as below.
How to remove this selected item not available.
Thanks.
I'm building a WYSIWYG tool in React/flux where you build interfaces by dragging and dropping elements onto a page. So for instance, I have a list of droppable elements: List, Form, Input Box, Text Box, etc. When the user drops one of those elements on the page, I need to insert the associated react component (and I store a name property of the object they drop, so I will know the component name I need). So if a user drops a list onto the page, and my associated component tag is <list />, I can't do just <{component.name} /> and it will turn it into <list />...yet I need a method of doing so. Any thoughts?
So fiddling around with this, I ended up getting it to work like this:
var Sort = require('./sort')
var List = require(./list')
var allComponents = {
sort: Sort,
list: List
}
React.createElement(allComponents[component.componentName], {data:component.data})
so now if my component.componentName is list, it will render the component, and data will become my properties