我需要鼠标点击和拖动,而不是水平滚动条。
x1c 0d1x当我单击并拖动子div时,子div应相对于拖动方向向左/右移动。
使用css或jquery/JS的任何解决方案
我的代码:
.parent{
width:300px;
border:5px sold red;
overflow:hihdden;
float:left;
}
.child{
width:1000px;
float:left;
font-size:15px;
font-family:arial;
padding:10px;
}
<div class="parent">
<div class="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>
3条答案
按热度按时间bwntbbo31#
这可以通过普通的javascript来实现。添加鼠标eventListeners到你想要拖动的元素,捕获你的起点,计算你的鼠标移动的滚动X位置。在拖动的同时,将这个位置应用到你的子元素:
xpcnnkqh2#
您可以在jquery UI中使用**. draggable()**函数。下面是一个链接,指向我根据您的代码创建的示例。更新代码http://jsfiddle.net/3mh2b7rk/4/
mfpqipee3#
我想扩展一点答案,因为很少有人有同样的问题,关于防止拖动子元素时的默认行为。
代码的基础不是我的--我只是在第一个函数中添加了另一个事件侦听器,因为我遇到了与人们评论的相同的问题,即当拖动带有图像的锚等元素时,它们会在释放鼠标按钮后被触发。