javascript 单击鼠标并拖动而不是水平滚动条(查看子Div的全部内容)

rhfm7lfc  于 2023-02-21  发布在  Java
关注(0)|答案(3)|浏览(109)

我需要鼠标点击和拖动,而不是水平滚动条。
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>
bwntbbo3

bwntbbo31#

这可以通过普通的javascript来实现。添加鼠标eventListeners到你想要拖动的元素,捕获你的起点,计算你的鼠标移动的滚动X位置。在拖动的同时,将这个位置应用到你的子元素:

const slider = document.querySelector('.parent');
let mouseDown = false;
let startX, scrollLeft;

let startDragging = function (e) {
  mouseDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
};
let stopDragging = function (event) {
  mouseDown = false;
};

slider.addEventListener('mousemove', (e) => {
  e.preventDefault();
  if(!mouseDown) { return; }
  const x = e.pageX - slider.offsetLeft;
  const scroll = x - startX;
  slider.scrollLeft = scrollLeft - scroll;
});

// Add the event listeners
slider.addEventListener('mousedown', startDragging, false);
slider.addEventListener('mouseup', stopDragging, false);
slider.addEventListener('mouseleave', stopDragging, false);
.parent{
  width:300px;
  border:5px solid red;
  overflow-x: hidden; 
  float:left;
}
.child{
  width:1000px;
  float:left;
  font-size:15px;
  font-family:arial;
  padding:10px;
  cursor: pointer;
}
<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>
xpcnnkqh

xpcnnkqh2#

您可以在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>
mfpqipee

mfpqipee3#

我想扩展一点答案,因为很少有人有同样的问题,关于防止拖动子元素时的默认行为。
代码的基础不是我的--我只是在第一个函数中添加了另一个事件侦听器,因为我遇到了与人们评论的相同的问题,即当拖动带有图像的锚等元素时,它们会在释放鼠标按钮后被触发。

function clickAndDrag(selector, scroll_speed = 3, classOnEvent = 'grabbed_elem') {
    const slider = document.querySelector(selector);
    let isDown = false;
    let startX;
    let scrollLeft;

    slider.addEventListener('mousedown', (e) => {
        e.preventDefault();
        isDown = true;
        slider.classList.add(classOnEvent);
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    
        // prevent default child behavior
        document.body.addEventListener('click', function( event ){
            if (slider.contains(event.target)) {
                event.preventDefault();
            }
        });
    });
    slider.addEventListener('mouseleave', () => {
        isDown = false;
        slider.classList.remove(classOnEvent);
    });
    slider.addEventListener('mouseup', () => {
        isDown = false;
        slider.classList.remove(classOnEvent);
    });
    slider.addEventListener('mousemove', (e) => {
        if(!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * scroll_speed; //scroll-fast
        slider.scrollLeft = scrollLeft - walk;
    });
}

// usage
clickAndDrag('.yourSelector');

相关问题