MVC中jQuery图片拖拽排序失效问题求助

在MVC视图中创建了可排序列表结构：

<div class="ui-sortable Imgsel">
    <ul class="list-group" id="SortableGallery" style="cursor:move">
    </ul>
</div>

通过以下代码点击按钮动态添加图片项：

for (var i = 0; i < files.length; i++) {
$('<li class="list-group-item col-md-4"><div><img id="image_' + i + '" src="' + '/TempUPL_FLD/' + '@Model.ImageURL' + '/' + i + '.' + ext + '" class="img-responsive MvImgUpl"/></div></li>').appendTo($("#SortableGallery"));
}

绑定jQuery UI Sortable组件的代码：

<script>
    $("#SortableGallery").sortable({
        update: function () {
            alert("Wow");
        }
    });
</script>

拖动图片时出现无法移动的图标，无法完成排序，排查方向如下：

• 动态添加元素后未刷新Sortable
  jQuery UI Sortable仅对初始化时已存在的元素生效，后续动态添加的li不会自动获得可排序能力。在添加完元素后调用sortable('refresh')即可解决：

  for (var i = 0; i < files.length; i++) {
      $('<li class="list-group-item col-md-4"><div><img id="image_' + i + '" src="' + '/TempUPL_FLD/' + '@Model.ImageURL' + '/' + i + '.' + ext + '" class="img-responsive MvImgUpl"/></div></li>').appendTo($("#SortableGallery"));
  }
  // 刷新Sortable组件，识别新添加的元素
  $("#SortableGallery").sortable('refresh');
  

• Bootstrap布局类冲突
  col-md-4是Bootstrap的浮动布局类，可能干扰Sortable的定位逻辑。可以调整布局结构，将col-md-4移到li内部的div上，避免浮动影响li的排序：

  <li class="list-group-item"><div class="col-md-4"><img id="image_' + i + '" src="..." class="img-responsive MvImgUpl"/></div></li>
  

• 脚本加载顺序错误
  必须先加载jQuery核心库，再加载jQuery UI库，否则Sortable组件无法正常初始化。确认页面脚本引用顺序：

  <script src="jquery.min.js"></script>
  <script src="jquery-ui.min.js"></script>
  

• 手动添加的ui-sortable类冲突
  外层div的ui-sortable类是jQuery UI自动为可排序容器添加的，手动给父元素添加这个类可能导致组件识别混乱，建议移除：

  <div class="Imgsel">
      <ul class="list-group" id="SortableGallery" style="cursor:move">
      </ul>
  </div>
  

内容的提问来源于stack exchange，提问作者Mario V