Javascript 单击并拖动可排序的jQuery div时，该项从浏览器的中间跳到左侧

对可排序列表中的项目进行排序时，该项目在排序/拖动时从浏览器中的中心位置跳到最左侧

点击AddTask两次，然后将一个项目排序到新位置，您将看到我所说的内容

$（文档）.ready（函数（）{
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});
$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，（）=>{
$（'.ul'）。追加(
'' +
“X”+
“▼
 "+
“详细信息

”+
“到期日”
”；
});
$（'.ul'）。在（'click'，'.detailcontainer'，函数（）上{
$（this）.closest（'.divvy'）.find（'.panel'）.toggle（）；
});
});
$（'.panel'）.hide（）；
$（'.optionBox'）。在（'单击'，'.remove'，函数（）上{
$（this.parent（）.fadeOut（400，function（））{
$（this.remove（）；
});
});
});
.panel{
显示：无；
}
.中心{
文本对齐：居中；
边缘顶部：58px；
}
.中央分区{
保证金：0自动；
}
.表格内联{
显示器：flex；
柔性流：行换行；
对齐项目：居中；
}
#删除样式{
背景：f04d25；
边框：纯色1px白色；
颜色：白色；
字号：700；
高度：45px；
宽度：10%；
边界半径：0px；
}
迪维先生{
边框：实心1px黑色；
填充：10px；
宽度：35%；
边界半径：2px；
背景：#C0C0；
位置：相对位置；
最小宽度：325px；
左边距：自动；
右边距：自动；
溢出：自动；
}
.Divy:悬停{
边框：实心2px深灰色；
填充：10px；
宽度：35%；
边界半径：2px；
背景：#C0C0；
最小宽度：325px；
保证金：0自动；
}
.divvy:活动的{
边框：实心2px深灰色；
填充：10px；
宽度：35%；
边界半径：2px；
背景：#C0C0；
-webkit盒阴影：2px2px8px2pxRGBA（0,0,0,0.15）；
-moz盒阴影：2px2px8px2pxrgba（0,0,0,0.15）；
盒影：2px2px8px2pxRGBA（0,0,0,0.15）；
最小宽度：325px；
保证金：0自动；
}
.输入{
宽度：75%；
高度：45px；
字体大小：22px；
字体系列：“无工作区”；
}

＋添加任务
您只需将以下内容添加到您的
.divvy
类：

.divvy {
  top:0;
  right:0;
  left:0;
}


$（文档）.ready（函数（）{
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
});
$（文档）.ready（函数（）{
$（'#添加'）。在（'单击'，（）=>{
$（'.ul'）。追加(
'' +
“X”+
“▼
 "+
“详细信息

”+
“到期日”
”；
});
$（'.ul'）。在（'click'，'.detailcontainer'，函数（）上{
$（this）.closest（'.divvy'）.find（'.panel'）.toggle（）；
});
});
$（'.panel'）.hide（）；
$（'.optionBox'）。在（'单击'，'.remove'，函数（）上{
$（this.parent（）.fadeOut（400，function（））{
$（this.remove（）；
});
});
});
.panel{
显示：无；
}
.中心{
文本对齐：居中；
边缘顶部：58px；
}
.中央分区{
保证金：0自动；
}
.表格内联{
显示器：flex；
柔性流：行换行；
对齐项目：居中；
}
#删除样式{
背景：f04d25；
边框：纯色1px白色；
颜色：白色；
字号：700；
高度：45px；
宽度：10%；
边界半径：0px；
}
迪维先生{
边框：实心1px黑色；
填充：10px；
宽度：35%；
边界半径：2px；
背景：#C0C0；
位置：相对位置；
最小宽度：325px；
左边距：自动；
右边距：自动；
溢出：自动；
排名：0；
右：0；
左：0；
}
.Divy:悬停{
边框：实心2px深灰色；
填充：10px；
宽度：35%；
边界半径：2px；
背景：#C0C0；
最小宽度：325px；
保证金：0自动；
}
.divvy:活动的{
边框：实心2px深灰色；
填充：10px；
宽度：35%；
边界半径：2px；
背景：#C0C0；
-webkit盒阴影：2px2px8px2pxRGBA（0,0,0,0.15）；
-moz盒阴影：2px2px8px2pxrgba（0,0,0,0.15）；
盒影：2px2px8px2pxRGBA（0,0,0,0.15）；
最小宽度：325px；
保证金：0自动；
}
.输入{
宽度：75%；
高度：45px；
字体大小：22px；
字体系列：“无工作区”；
}

jQuery UI可排序-默认功能
＋添加任务


为
#sortable
指定宽度似乎可以解决以下问题：

#sortable {
  width: 380px;
}

非常感谢。你既是学者又是圣人。这么简单，但正是我需要的@我很乐意帮忙！：-）