ons-list-item の Drag & Dropのサンプルです。
See the Pen ons-list-item drag&drop (jQuery UI) by senmyou (@senmyou) on CodePen.
jQuery UIのsortable機能を使っています。使用しているファイルは「jquery.min.js」、「jquery-ui.min.js」、「jquery.ui.touch-punch.min.js」です。
リストを２つ並べましたが、違いは「線（ボーダー）」だけです。ほんとは下のリストのほうがいいと思うのですが、下のリストは一番下のリストアイテムをドラッグしたとき、一番下の線が太く見えてしまうという問題があります。上のリストはたんにその応急処置的なものです。
なぜ太く見えるかというと、ドラッグ時にjQuery UIにより生成されるヘルパー用のons-list-itemがリストの一番下に配置されるため、そのひとつ前のリストアイテムに、
.list__item:last-child {
border-bottom: none;
}
が適用されず、ボーダーが引かれるからだと思われます。ヘルパー用の ons-list-item は position:absolute の指定によりドラッグポイントを追従して描画されますが、要素はドラッグ開始位置に生成されるため、一番下のリストアイテムをドラッグするとヘルパーは一番下に生成されます。
例えば、.list__item の last-childが .ui-sortable-helper のとき、そのひとつ前の要素が選択できればよさそうですが、やり方がわかりませんでした。なにかいい方法があればいいのですが。
とりあえず、ご参考まで。