jQuery UI隐藏droppables故障：flexbox布局轮播图向左拖拽失效问题

该问题是flex布局尺寸计算规则、隐藏轮播项占位、jQuery UI draggable边界检测逻辑三者共同作用导致的，不属于jQuery UI的内部bug。 #

具体原因 #

• 轮播项隐藏逻辑问题：当前的轮播实现仅对非激活项做了透明度/偏移隐藏，没有设置display: none或者脱离文档流，隐藏的轮播项仍然占据实际的DOM空间，会撑开.slideshow-container的实际宽度
• flex布局的尺寸计算规则：flex子元素的宽度计算会包含所有内部子元素的实际占位，哪怕子元素视觉上不可见，这就导致.slideshow-container的实际左边界远小于你视觉上看到的轮播区域左边界
• jQuery UI draggable的边界检测逻辑：draggable组件计算可拖拽范围、droppable组件计算出入事件的时候，取的是元素的实际DOM尺寸，而非视觉可见尺寸。你向左拖拽图片的时候，实际上还没有超出.slideshow-container的实际左边界，所以不会触发移出事件；向右拖拽时很快超出容器实际右边界，所以可以正常移出。

修复方案 #

• 给.slideshow-box添加overflow: hidden和固定宽高，限制内部隐藏轮播项不会撑开父容器的视觉外尺寸
• 调整轮播非激活项的隐藏逻辑，设置display: none或者position: absolute脱离文档流，避免占用实际空间
• 如果不想改动轮播原有逻辑，可以手动给draggable配置自定义的containment边界坐标，或者将droppable的tolerance参数设置为touch，降低触发移出事件的阈值。

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