[F7Vue] smart-select sortable?

Questions
1

Is there a way to make the list in a smart-select sortable?

I use it similar to the ‘Car’ example in kitchen-sink, but would also like to drag the list-items to re-arrange…

1 Like
2

Well, a bit hacky, and it is not indended for such, but possible :slight_smile: here is the example https://jsfiddle.net/c97guxr5/

2 Likes
3

Great! Thanks…

there’s still one problem:

I can drag the list-items and I also get the sortableSort event, but as soon as I release the mouse, the list-item jumps back to it’s original position (as if I would have released the mouse outside)

this.$f7.on('sortableSort', function(listEl, indexes) {
       console.log(listEl, indexes);
}

Any ideas?

4

Do you try something to do on sort? I can see it works correctly in Fiddle

5

I copied my smart-select to the jsFiddle and it works fine there…
Not sure what’s going on - I will investigate later.

Thanks for your help!

6

For some reasons (I have no clues why), I had the ‘moveElements’ property set to false in f7params:

f7params: {
    sortable: {
        moveElements: false,
      }
}

After setting it to true everything works like a charme!

So: sorry for the spam! :/:roll_eyes:

1 Like
7

hello I had difficulties with the same problem and I hope this can help someone.

In my case I don’t use Vue

var smartSelect = app.smartSelect.create ({
el: ‘. MyList’,
pageTitle: ‘List’,
on: {
open: function () {
sortableItens (this);
},

     },
   });

function sortableItens (e) {
e. $ containerEl.find (’. list’). addClass (‘sortable’);
e. $ containerEl.find (’. item-divider’). addClass (‘no-sorting’);
e. $ containerEl.find (‘li: not (.item-divider)’). append (’

‘);
app.sortable.enable (e. $ containerEl.find (’. list’))
}