Как перетаскивать контейнер при взаимодействии с его дочерними элементами?

Question

[Максим Черных]

Есть такой блок

Нужно чтобы тачем можно было скролить влево вправо.

Есть скрипт который работает, но если попробовать поскролить через дочерние элементы li, то не работает.

<ul class="tabs__caption">
	<li class="active">Audi</li>
	<li>Volkswagen</li>
	<li>Mercedes</li>
	<li>BMW</li>
</ul>

var dragItem = document.querySelector(".tabs__caption");
	var container = document.querySelector(".card_links");

	var active = false;
	var currentX;
	var initialX;
	var xOffset = 0;

	container.addEventListener("touchstart", dragStart, false);
	container.addEventListener("touchend", dragEnd, false);
	container.addEventListener("touchmove", drag, false);

	container.addEventListener("mousedown", dragStart, false);
	container.addEventListener("mouseup", dragEnd, false);
	container.addEventListener("mousemove", drag, false);

	function dragStart(e) {
		if (e.type === "touchstart") {
			initialX = e.touches[0].clientX - xOffset;
		} else {
			initialX = e.clientX - xOffset;
		}

		if (e.target === dragItem) {
			active = true;
		}
	}

	function dragEnd(e) {
		initialX = currentX;

		active = false;
	}

	function drag(e) {
		if (active) {

			e.preventDefault();

			if (e.type === "touchmove") {
				currentX = e.touches[0].clientX - initialX;
			} else {
				currentX = e.clientX - initialX;
			}

			xOffset = currentX;

			setTranslate(currentX, dragItem);
		}
	}

	function setTranslate(xPos, el) {
		el.style.transform = "translate3d(" + xPos + "px, 0px, 0px)";
	}