拖拽Div组件实现：Sortable配置及Bootstrap资源引入技术问询

我来帮你拆解这段拖拽排序代码的来龙去脉，还有引入的资源到底起什么作用：

一、资源引入的作用 #

你看到的这段Bootstrap CSS引入，是Bootstrap 4.1.0的编译压缩版样式文件，它的核心作用有这几点：

• 搞定跨浏览器的样式差异，做了全局样式重置，不用自己写一大堆兼容代码
• 自带响应式布局系统，能轻松适配手机、平板、桌面等不同设备的屏幕
• 提供了一堆现成的UI组件和工具类，比如按钮、卡片、容器样式啥的，这里拖拽用到的ui-state-highlight占位符样式，也能借助Bootstrap的风格变得更美观（这个类本身是jQuery UI的，但Bootstrap可以和它配合优化视觉效果）

二、Sortable拖拽排序的核心逻辑 #

这段代码是基于jQuery UI的Sortable插件实现的，专门给类名为.component-container的容器开启拖拽排序功能，每个配置和回调的作用我给你挨个说：

基础配置项 #

• cursor: 'move'：用户开始拖拽元素时，鼠标指针会变成“移动”样式（就是那个十字箭头），给用户明确的交互提示，告诉他们“这个元素能拖”
• items: ".component-section"：指定容器里只有带.component-section类的Div才能被拖拽，其他元素不会触发拖拽事件，避免误操作
• placeholder: 'ui-state-highlight'：拖拽的时候，元素要放的位置会显示一个占位符，这个配置就是给占位符加上ui-state-highlight类，让它有高亮的视觉效果，方便用户预判放置位置

start回调函数（拖拽开始瞬间触发） #

这个回调是用来优化占位符的视觉体验的，毕竟默认占位符可能和被拖拽元素尺寸、样式不一样，会显得突兀：

• ui.placeholder.width(ui.item.find('.component-section').width());：把占位符的宽度设置成和被拖拽的Div一模一样，避免占位符突然变宽变窄破坏布局
• ui.placeholder.height(ui.item.find('.component-section').height());：同理，让占位符的高度和被拖拽Div完全匹配，保持拖拽过程中布局的连贯性
• ui.placeholder.addClass(ui.item.attr("class"));：把被拖拽Div的所有类名都复制给占位符，这样占位符就能继承被拖拽元素的所有样式——比如边框、内边距、背景色啥的，让占位符看起来和被拖拽元素几乎一样，用户拖拽时会更直观

另外要提一句：这段代码能跑起来，前提是你已经引入了jQuery和jQuery UI的Sortable插件（代码里没写这俩的引入，但sortable()是jQuery UI的方法，必须先加载这俩文件才行）。

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