Javascript 鼠标单击并拖动，而不是水平滚动条（以查看子Div的完整内容）

我需要鼠标点击并拖动，而不是水平滚动条

当我单击并拖动应沿拖动方向向左/向右移动的子div时。

任何使用css或jquery/JS的解决方案

我的代码：

.parent{
宽度：300px；
边框：5px卖红色；
溢出：hihdden；
浮动：左；
}
.孩子{
宽度：1000px；
浮动：左；
字体大小：15px；
字体系列：arial；
填充：10px；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行

您可以从jquery UI使用.draggable（）函数。这里有一个链接，指向我根据您的代码创建的示例更新代码

jQuery（“#子”）.draggable（{
光标：“移动”，
遏制：“家长”，
停止：函数（）{
if（jQuery（“#child”）.position（）.left<1）
jQuery（“#child”）.css（“左”，“720px”）；
}
});
.parent{宽度：300px；边框：5px纯红；溢出：隐藏；左：20px}
.child容器{宽度：1730px；左：-710px；位置：相对；}
#子项{宽度：1000px；浮点：左；字体大小：15px；字体系列：arial；填充：10px 5px 10px 0；左：720px；右边框：4px实心红色}
.clear{clear:both；}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
这可以通过普通javascript实现。将鼠标事件监听器添加到要拖动的元素中，捕获起点并计算鼠标移动的滚动X位置。拖动时，将此位置应用于子元素：


const slider=document.querySelector（'.parent'）；
让mouseDown=false；
让startX向左滚动；
让StartDraging=函数（e）{
mouseDown=true；
startX=e.pageX-slider.offsetLeft；
scrollLeft=slider.scrollLeft；
};
让停止拖动=函数（事件）{
mouseDown=false；
};
slider.addEventListener（'mousemove'，（e）=>{
e、 预防默认值（）；
如果（！mouseDown）{return；}
const x=e.pageX-slider.offsetLeft；
常量滚动=x-开始发送；
slider.scrollLeft=scrollLeft-滚动；
});
//添加事件侦听器
slider.addEventListener（'mousedown'，startDragging，false）；
slider.addEventListener（'mouseup'，停止拖动，false）；
slider.addEventListener（'mouseleave'，停止拖动，false）
.parent{
宽度：300px；
边框：5px纯红；
溢出x：隐藏；
浮动：左；
}
.孩子{
宽度：1000px；
浮动：左；
字体大小：15px；
字体系列：arial；
填充：10px；
光标：指针；
}

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着包括Lorem Ipsum版本的Aldus PageMaker等桌面出版软件的发布而流行
您可以使用mouseDown和mouseUp事件并更改父容器的X位置。打字错误，在
边框中
，
实心
和
溢出
缺少“i”应该是
隐藏
而不是
hihdden
感谢您的出色工作，但在这里我想在“.ui draggable”左值位于“0”上方。我不希望在子div处于原始位置时将其从左向右移动。可以通过在draggable调用中添加属性revert:true来实现这一点。例如jQuery（“.child”）.draggable（{cursor cursor:“move”，revert:true}）；是的，当左值更改为“0”上方时，我希望这样做“。你能分享任何演示吗。stop:function（event，ui）{var stop=ui.position.left；if（stop>0）{ui.draggable.draggable（'option'，'revert'，true）；}else{$（this.draggable（'option'，'revert'，'invalid'）；}我已经更新了演示代码并更新了我的原始注释。。为了搜索者的利益，这对我很有用。