Jquery UI可排序在排序项目中具有图像

Question

我有一个像上面图片一样的可排序列表，每个可排序块之间都有一个图标。

jquery UI中的当前代码可排序如下：

    if (count($track_list) > 0) {
        echo "<ul class='sortable_panel'>";
            foreach ($track_list as $key => $video) {
                ?>
                <li class="video_bar">
                 .....
                </li>
                <?php
                if ($key != count($track_list) - 1) {
                    echo "<div style='text-align:center;'><i class='fa fa-link icon-flipped'></i></div>";
                }
            }
        echo "</ul>";
    }

使用Javascript：

$('.sortable_panel').sortable();

问题是，如何

1）使图标无法排序

2）如果第一项被拖到最后一项，如何让第二项成为第一项和图标上方？

非常感谢你的帮助。