jQuery UI Draggable设置containment后仅能垂直拖拽无法水平拖拽怎么办

问题原因 #

你给.window元素设置的margin: 0 auto属性是核心诱因：该属性会强制元素保持水平居中，直接抵消jQuery UI拖拽时修改的水平偏移值，所以只会出现仅能垂直拖拽的情况。

解决步骤 #

无需修改JS拖拽配置，只需要调整两处CSS即可：

1. 给.bg容器添加定位属性，作为子元素的定位参考边界
2. 把.window的水平居中配置替换为绝对定位，同时设置初始位置避免元素默认贴边

修改后的对应CSS代码如下：

/* 调整后的.bg样式 */
.bg { 
  background-image: url("http://abload.de/img/background4mqdx.jpg");
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; /* 新增这行 */
}

/* 调整后的.window样式 */
.window {
    display: flex;
    flex-direction: column;
    min-width: 30%;
    width: fit-content;
    padding: 4px 5px 5px 4px;
    height: 70%;
    box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
    background-color: #C2C5CA;
    position: absolute; /* 替代原来的margin: 0 auto */
    top: 15%; /* 初始垂直位置，可按需调整 */
    left: 35%; /* 初始水平位置，可按需调整 */
}

修改完成后即可在.bg容器内全方向自由拖拽，不会超出容器边界。

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