Ordering list items

Panel
1

Based in the comment Panel running on iPad, I was exploring the ionic framework. For the record, there is the possibility of ordering list items

import panel as pn
pn.extension()

html = """
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>


<ion-reorder-group disabled="false">
  <ion-item><ion-label>Item 1</ion-label><ion-reorder slot="end"></ion-reorder></ion-item>
  <ion-item><ion-label>Item 2</ion-label><ion-reorder slot="end"></ion-reorder></ion-item>
  <ion-item><ion-reorder slot="start"></ion-reorder><ion-label>Item 3</ion-label></ion-item>
  <ion-item><ion-reorder slot="start"></ion-reorder><ion-label>Item 4</ion-label></ion-item>
  <ion-item><ion-label>Item 5</ion-label><ion-reorder slot="end"><ion-icon name="pizza"></ion-icon></ion-reorder></ion-item>
  <ion-item><ion-label>Item 6</ion-label><ion-reorder slot="end"><ion-icon name="pizza"></ion-icon></ion-reorder></ion-item>
  <ion-reorder><ion-item><ion-label>Item 7</ion-label></ion-item></ion-reorder>
  <ion-reorder><ion-item><ion-label>Item 8</ion-label></ion-item></ion-reorder></ion-reorder-group>
</ion-fab>
 
<script>
const reorderGroup = document.querySelector('ion-reorder-group');

reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
  // The `from` and `to` properties contain the index of the item
  // when the drag started and ended, respectively
  console.log(detail, 'Dragged from index', detail.from, 'to', detail.to);

  // Finish the reorder and position the item in the DOM based on
  // where the gesture ended. This method can also be called directly
  // by the reorder group
  detail.complete();
});
</script>

"""


hh = pn.pane.HTML(html,width=300)

tmpl = pn.template.VanillaTemplate(title='Ordering List')
tmpl.main.append(hh)
tmpl.show()

ordering_list

1 Like