Перетаскивание списков по горизонтали с мышью не работает

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