如何用jQuery UI与CSS实现可拖拽、可调尺寸的透明选框效果

完全可以通过jQuery UI的draggable()、resizable()搭配CSS实现目标效果。你猜想的「2个遮罩层+1个可拖拽透明选框」的结构是可行的，不需要给两个遮罩层单独绑定调整尺寸/拖拽事件，所有位置、尺寸变化都由中间选框驱动即可，逻辑更简单，也不会出现多组件联动冲突。

• 最底层放置需要展示的完整内容，支持图片、视频、文本、任意DOM组件
• 内容层上方平铺两个不透明/半透明遮罩层，分别对应选框左侧、右侧的遮挡区域
• 中间透明选框设置为绝对定位，绑定draggable()限制仅水平方向拖动，拖动时动态计算左右遮罩的宽度：左遮罩宽度等于选框相对容器的左偏移值，右遮罩宽度等于容器总宽度减去（选框左偏移值+选框自身宽度）
• 选框同时绑定resizable()，仅保留左右两个调整手柄，限制仅水平方向调整尺寸，调整过程中复用和拖拽时完全一致的遮罩宽度更新逻辑
• 选框的红色调整手柄直接通过自定义jQuery UI自带的resizable手柄样式实现，不需要额外新增DOM节点
• 你提到的选框上下方紫色区域属于可选装饰，不影响核心逻辑，不需要可以直接省略

HTML结构 #

<!-- 外层容器，所有组件都放在容器内做相对定位 -->
<div class="content-container">
  <!-- 这里替换成你自己的底层内容，示例用图片做演示 -->
  <img src="your-content-file-path" alt="底层展示内容">
  <!-- 左右遮罩层 -->
  <div class="overlay overlay-left"></div>
  <div class="overlay overlay-right"></div>
  <!-- 透明选框 -->
  <div class="crop-selector"></div>
</div>

CSS样式 #

.content-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.overlay {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.75); /* 可自行修改遮罩颜色、透明度 */
  z-index: 10;
}
.overlay-left {
  left: 0;
}
.overlay-right {
  right: 0;
}
.crop-selector {
  position: absolute;
  top: 0;
  height: 100%;
  width: 220px; /* 选框初始宽度 */
  left: 50%;
  transform: translateX(-50%);
  border-left: 2px solid #ff3b30;
  border-right: 2px solid #ff3b30;
  cursor: move;
  z-index: 20;
}
/* 自定义左右调整手柄的红色样式 */
.ui-resizable-e, .ui-resizable-w {
  width: 8px;
  height: 100%;
  background: #ff3b30;
  cursor: ew-resize;
}

JS逻辑（需提前引入jQuery和jQuery UI资源） #

// 统一封装遮罩宽度更新方法，拖拽、调整尺寸、窗口缩放时复用
const refreshOverlayWidth = () => {
  const $selector = $('.crop-selector');
  const selectorOffsetLeft = $selector.position().left;
  const selectorWidth = $selector.outerWidth();
  const containerWidth = $('.content-container').outerWidth();

  $('.overlay-left').width(selectorOffsetLeft);
  $('.overlay-right').width(containerWidth - selectorOffsetLeft - selectorWidth);
};

$(function() {
  // 初始化选框拖拽能力
  $('.crop-selector').draggable({
    axis: 'x', // 限制仅水平方向拖动
    containment: '.content-container', // 禁止拖出内容容器
    drag: refreshOverlayWidth
  })
  // 初始化选框尺寸调整能力
  .resizable({
    handles: 'e, w', // 仅保留左右两个调整手柄
    containment: '.content-container', // 禁止调整尺寸时超出容器
    minWidth: 60, // 设置选框最小宽度，避免缩为0
    resize: refreshOverlayWidth
  });

  // 初始化完成后先执行一次，适配初始位置的遮罩
  refreshOverlayWidth();

  // 窗口尺寸变化时重新计算遮罩宽度，避免错位
  $(window).on('resize', refreshOverlayWidth);
});

• 如果需要加上下紫色装饰条，只需要在选框内新增上下两个绝对定位的紫色div即可，不会影响核心拖拽、调整尺寸的逻辑
• 选框边框粗细、手柄大小、遮罩颜色都可以通过CSS直接修改，不需要调整JS逻辑
• 如果需要支持选框垂直方向拖动/调整高度，只需要去掉axis: 'x'配置，加上上下遮罩和上下手柄的尺寸计算逻辑即可快速扩展

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