search

jwlarocque / svelte-dragdroplist

Sortable lists with Svelte 3. Animated, touch-friendly, and accessible.
114 stars 24 forks source link

Suggestions for removing from the list? #1

Closed avimar closed 4 years ago

avimar commented 4 years ago

Nice component, the moving is nice and smooth. I bound this and a table to the same data and I could see it re-arrange the table columns as I dragged!

Do you have suggestions for toggling/removing from the list too? e.g. disable/delete from the list?

Current use case: About 70x columns of data, way too many to fit comfortably on screen. So, remove what's not relevant and then re-arrange to the user's desire. The re-arranging part you got down, any suggestions for the toggling to turn off a column? (I'm OK with deleting it, and having a separate list elsewhere to add them back.)

avimar commented 4 years ago

I went and modified the component to add a delete button with a delete function. Thanks!


    function deleteDatum(from) {
        data = data.filter(d=>d!=data[from]);
    }
jwlarocque commented 4 years ago

Glad you liked the component! Sorry to necro this issue, but I've added support for deleting items in the most recent version of the component (>= 1.1.0) with #3. Just add the removesItems={true} prop to get a delete button for each item.

avimar commented 4 years ago

Cool. I played with it on my phone, and maybe this is a case bug?

When you use the HTML version of the data, the x for remove isn't floated to the right.

jwlarocque commented 4 years ago

Thanks for bringing this up. I had originally avoided applying any styling to HTML items because I wanted to leave that to developers, but I think you're right that the default behavior should be to align them the same way as text items.

I'll put out a patch version that right aligns all delete buttons and includes some tips for styling.