Jquery css溢出隐藏除左外的所有内容

我正在尝试创建一个拖放框，就像一个购物车。但是，脚本框中的内容隐藏了我从框中拖动时需要拖动的div。我需要一个烤饼条，这样底部和顶部都可以隐藏。是否有办法只允许左侧的内容显示？

这是我迄今为止的一个演示：

我正在使用malihu定制的jQuery滚动条。我可以在这里找到：

我发现隐藏它的代码在js文件中。 可以在这里找到：

在此文件中更改它的代码行是：

m.wrapInner("<div class='mCustomScrollBox mCS-"+e.theme+"' id='mCSB_"+c(document).data("mCustomScrollbar-index")+"' style='position:relative; height:100%; overflow:hidden; max-width:100%;' />")

m.wrapInner（“”）

可能的解决方法：必须有一种方法使我选择的jQuery项从这个框中弹出，这样它就不受限制了。也许我可以在点击时创建一个“克隆”作为一个解决方案

或者我可以只显示左侧。但要做到这一点，我需要改变js

如有任何想法，将不胜感激

下面是我的代码：（注意，我尝试使用的div称为“content2”

无标题文件
#菲利姆{
/*注意：显示：输入上的“无”不会触发WebKit中的单击事件。
设置可见性：隐藏和高度/宽度：0非常有用*/
可见性：隐藏；
宽度：0；
身高：0；
}
.fileSelect{
宽度：250px；
显示：块；
高度：20px；
}
.leftUpload{
浮动：左；
}
.rightUpload{
背景图片：url（../images/bgGrunge.jpg）；
高度：500px；
宽度：500px；
显示：块；
浮动：对；
背景位置：中心；
边框顶部样式：虚线；
右边框样式：虚线；
边框底部样式：虚线；
左边框样式：虚线；
剪辑：rect（自动，自动，自动，自动）；
边缘底部：10px；
}
卡瑟尔德先生{
左侧填充：50px；
边框顶部样式：无；
右边框样式：无；
边框底部样式：无；
左边框样式：无；
填充顶部：10px；
显示：块；
左边距：15px；
浮动：无；
位置：相对位置；
}
猫先生{
浮动：左；
背景图片：url（../images/bgCat.png）；
高度：30px；
宽度：133px；
线高：30px；
填充顶部：0px；
右边填充：0px；
垫底：0px；
字体大小：11px；
文本对齐：居中；
显示：块；
字体系列：Arial、Helvetica、无衬线字体；
颜色：#333；
z指数：33；
}
.猫箱{
浮动：左；
背景图像：url（../images/catagory.png）；
背景位置：中心；
身高：483px；
宽度：166px；
填充顶部：20px；
背景重复：无重复；
左侧填充：20px；
右边距：0px；
z指数：0；
}
.垫片{
宽度：150px；
边框顶部样式：无；
右边框样式：无；
边框底部样式：无；
左边框样式：无；
显示：块；
顶部：33px；
边缘顶部：15px；
高度：25px；
}
卡提姆博士{
宽度：133px；
边框顶部样式：无；
右边框样式：无；
边框底部样式：无；
左边框样式：无；
垫面：5px；
左：3倍；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
文本转换：大写；
位置：相对位置；
}
.内容2{
利润率：40像素；
宽度：171像素；
身高：433px；
填充：20px；
背景：#333；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
位置：绝对位置；
左：220px；
顶部：-25px；
}
$（文档）.ready（函数（）{
$（函数（）{
$（“.cat”）.draggable（）；
$（“.catBox”）.可拖放({
drop：函数（事件、用户界面）
{
$（本）
$（“+ui.draggable.attr（'id'）+”）.appendTo（'catItems”）；
$（“#”+ui.draggable.attr（'id'）+”）.remove（）；
}
});
}); 
////
$（“.fileSelect”）.hide（）；
$（“.Name”）.hide（）；
$（“#测试”）。单击（函数（）
{
警报（$（“.fileSelect”）.val（）；
});
$（“#浏览”）。单击（函数（）
{
$（“.fileSelect”）。单击（）；
});
$（“.fileSelect”）.change（函数（）{
$（“#浏览”）.hide（）；
$（“.Name”）.show（）；
//$（“.fileSelect”）.show（）；
var值=$（“.fileSelect”）.val（）；
$（“.Name”）.text（值）；
警报（$（'.fileSelect'）.text.val（）
});
});
！window.jQuery&&document.write（unescape（“%3Cscript src”/scroll/js/minified/jQuery-1.9.1.min.js”%3E%3C/script%3E'））
（函数（$）{
$（窗口）。加载（函数（）{
$（“内容1”）.mCustomScrollbar({
滚动按钮：{
启用：true
}
});
});
})（jQuery）；
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动
堆栈
结束
流动

您在可拖动项的容器上设置了

溢出

设置为

隐藏

。拖动这些项时，它们仍然是该DOM元素的一部分，并遵守其规则，直到被删除。请尝试添加：

#mCSB_1 {
    overflow:visible;
}

---

您的示例中确实存在大量错误。可能先修复这些错误。然后确定它是HTML还是XHTML。目前，两者都不是。

#mCSB_1 {
    overflow:visible;
}