Javascript 鼠标单击并拖动而不是水平滚动条（查看子 Div 的完整内容）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28576636/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mouse click and Drag Instead of Horizontal Scroll bar( To view full content of child Div)
提问by Ezhil_UI_Developer
I need Mouse click and Drag instead of Horizontal scroll bar.
我需要鼠标单击和拖动而不是水平滚动条。
When i click and drag the child div that should move on left/right respect to dragging direction.
当我单击并拖动应该相对于拖动方向向左/向右移动的子 div 时。
Any solution with css or jquery/JS
任何使用 css 或 jquery/JS 的解决方案
My css code:
我的CSS代码：
.parent{width:300px; border:5px sold red; overflow:hihdden;
float:left;}
.child{ width:1000px; float:left; font-size:15px;
font-family:arial; padding:10px;}
回答by Bala
You can use .draggable()function from jquery UI. Here's a link to sample i created based on your code. Updated Codehttp://jsfiddle.net/3mh2b7rk/4/
您可以使用jquery UI 中的.draggable()函数。这是我根据您的代码创建的示例的链接。更新代码http://jsfiddle.net/3mh2b7rk/4/
jQuery("#child").draggable({
cursor: "move",
containment: "parent",
stop: function() {
if(jQuery("#child").position().left < 1)
jQuery("#child").css("left", "720px");
}
});.parent{width:300px; border:5px solid red; overflow:hidden; left:20px}
.child-container{width:1730px;left:-710px;position:relative;}
#child{ width:1000px; float:left; font-size:15px; font-family:arial; padding:10px 5px 10px 0;left:720px; border-right:4px solid red}
.clear {clear:both;}<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div class="parent">
<div class="child-container">
<div id="child"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
<div class="clear"></div>
</div>
</div>