JQuery拖拽排序功能在jsfiddle正常但MVC应用中克隆元素无法适配容器宽度

适配高版本jQuery UI拖拽克隆元素尺寸的实现方法 #

该尺寸异常是jQuery UI 1.9.x到1.12.x版本的内部逻辑变更导致的：旧版本会自动将克隆helper适配sortable容器宽度，新版本默认保留拖拽源元素的原始尺寸，可通过以下三种方式修复：

• 拖拽初始化时强制设置克隆元素宽度
  修改draggable配置，在start回调中手动将helper宽度设置为sortable容器的宽度：

$(".draggable").draggable({
    connectToSortable:"#child-container",
    helper: "clone",
    start: function(event, ui) {
        ui.helper.width($("#child-container").width());
    }
});

• 元素放置后重置尺寸
  如果松手放置后元素尺寸仍然异常，可在sortable的receive事件中重置新放入元素的宽度：

$("#child-container").sortable({
    receive: function(event, ui) {
        // 直接设置为容器宽度
        ui.item.width($(this).width());
        // 也可清除内联宽度，恢复元素本身的布局默认值
        // ui.item.css('width', '');
    }
});

• 全局CSS强制适配
  也可通过CSS全局设置拖拽helper的宽度规则，避免JS逻辑修改：

/* 适配拖拽过程中的克隆元素 */
.ui-draggable-helper {
    width: 100% !important;
    box-sizing: border-box !important;
}
/* 适配sortable内的占位元素，避免占位宽度异常 */
.ui-sortable-placeholder {
    width: 100% !important;
    box-sizing: border-box !important;
}

以上三种方案可单独使用，也可组合使用覆盖所有场景。

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