Question

我有一个像这样水平滚动的div列表：

<div class="caroussel"˜>
    <div class="item">
</div>

我在制作可拖动的项目列表时遇到了一些问题

发生了两个问题：

1）此列表根据单击按钮显示和隐藏。然后我添加一个.toggle（'-active'）类，该类仅添加或删除div高度，以便显示或隐藏该div。但是，当我将其隐藏并再次显示时，滚动和拖动将停止工作。

2）当我拖动列表时，它会切断列表的一部分-假设我有5个项目，当我拖动时仅显示3个项目，并且它被拖动而没有限制。我想一直拖到列表结束，而不是整个页面宽度。我有一个JavaScript代码来添加此拖动事件，如下所示：

这是我为此尝试使用的javascript代码：

var _startX = 0;
var _offsetX = 0;
var _dragElement;
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;

function OnMouseDown(event) {
  document.onmousemove = OnMouseMove;
  _startX = event.clientX;
  _startY = event.clientY;
  offsetX = document.querySelector('.caroussel').offsetLeft;
  dragElement = document.querySelector('.caroussel');
}

function OnMouseMove(event) {
  console.log(_offsetX + event.clientX - _startX);

  _dragElement.style.left = (_offsetX + event.clientX - _startX) + 'px';


}

function OnMouseUp(event) {
  document.onmousemove = null;
  _dragElement = null;
}

我希望列表实际显示所有项目，然后将其拖到显示最后一个项目。现在，这还没有发生，加上，当我拖动列表时，它覆盖了其他html元素，没有考虑到div容器的最大宽度

使用鼠标无法水平拖动列表

0 个答案: