react-sortable-hoc
react-sortable-hoc copied to clipboard
clauderic
Add Placeholders Node where the Drop would happen
I have just rewritten the sorting part of an application, I am developing in React and stumbled upon your "react-sortable-hoc". Before we used jqueryUI.
I am sorting a List (that's displayed as a grid).
Before we showed a placeholder in the spot where the item would be dropped. However, I haven't figured out a clever way to do this using your package.
Old Behaviour with Placeholders
New Behaviour without Placeholders
I just started working on something similar to this. There doesn't appear to be an easy way to do this. I'm thinking it may be possible to:
- useDragHandle inserts a dummy element in the original indexValue of the list, styled how you want (a placeholder)
- onSortEnd looks for the the placeholder in the list, and deletes it.
Only problem is DragHandle seems to fire on any event for all list elements. In my case each element contains in an input field. Editing one field (say in a list of two) useDragHandle fires twice for each key stroke.
Did you ever come up with a solution? I think I'm close...
const DragHandle = SortableHandle((indexValue) => {
console.log(indexValue)
// should inset dummy element to indexValue here
return (
<div className='grabHandle'/>
)
})
const SortableItem = SortableElement(({value, indexValue, onEdit, onRemove}) => {
return (
<Segment compact textAlign='left' className='horizontal'>
<DragHandle indexValue={indexValue}/>
<Input name={indexValue} value={value} placeholder={value} className='grabHandleInput' onChange={onEdit}/>
... SNIP ...
</Segment>
);
}
);
Unfortunately, the absence of placeholder functionality is blocking me from using this awesome library in my project.
Unfortunately, the absence of placeholder functionality is blocking me from using this awesome library in my project.
Same here +1
Me Too, please update if there is any droppable zone/ placeholder available in the future, would be awesome to have it
I see this ticket's been open for well over a year. Has anyone figured out a sustainable workaround?
I'm thinking of a similar thing. Let's say we have a list of items. There will be a Trashcan and anything dropped there would be deleted. Anyone got any ideas for that?
