Touch effect / click and drag with mouse

Question

Touch effect / click and drag with mouse

Navigation

#1 by (1 votes)

0

I have a gallery with horizontal scroll, I would like to know if it is possible to put a click and drag to move the scroll, like a touch dragging with the mouse.

obs: images will be linked.

My Gallery:

function mostra(theId){
	var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6');
	for(i=0; i<theArray.length; i++){
		if(theArray[i] == theId){
			document.getElementById(theId).style.display='block';
		}else{
			document.getElementById(theArray[i]).style.display='none';
		}
	}
}

function exibe(theId){
	var theArray= new Array('item-1', 'item-2', 'item-3', 'item-4', 'item-5', 'item-6');
	for(i=0; i<theArray.length; i++){
		if(theArray[i] == theId){
			document.getElementById(theId).style.display='block';
		}else{
			document.getElementById(theArray[i]).style.display='none';
		}
	}
}

var SETTINGS = {
    navBarTravelling: false,
    navBarTravelDirection: "",
	 navBarTravelDistance: 150
}

var colours = {
    0: "#00BFFF",
    1: "#32CD32",
    2: "#FF0000",
    3: "#40FEFF",
    4: "#14CC99",
    5: "#00BAFF",
    6: "#0082B2",
    7: "#B25D7A",
    8: "#00FF17",
    9: "#006B49",
    10: "#00B27A",
    11: "#996B3D",
    12: "#CC7014",
    13: "#40FF8C",
    14: "#FF3400",
    15: "#ECBB5E",
    16: "#ECBB0C",
    17: "#B9D912",
    18: "#253A93",
    19: "#125FB9",
}


document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");

// the indicator
var indicador = document.getElementById("indicador");
var trilho = document.getElementById("trilho");

// Set the indicator
moveIndicator(trilho.querySelector("[aria-selected=\"true\"]"), colours[0]);


// Handle setting the currently active link
trilhoContents.addEventListener("click", function(e) {
	var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	e.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator(e.target, colours[links.indexOf(e.target)]);
});


// var count = 0;
function moveIndicator(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = trilhoContents.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = trilhoContents.scrollLeft;
    indicador.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// indicador.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        indicador.style.backgroundColor = color;
    }
}

function determineOverflow(content, container) {
    var containerMetrics = container.getBoundingClientRect();
    var containerMetricsRight = Math.floor(containerMetrics.right);
    var containerMetricsLeft = Math.floor(containerMetrics.left);
    var contentMetrics = content.getBoundingClientRect();
    var contentMetricsRight = Math.floor(contentMetrics.right);
    var contentMetricsLeft = Math.floor(contentMetrics.left);
	 if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }
}

var indicador2 = document.getElementById("indicador2");
var trilho2 = document.getElementById("trilho2");

var colours2 = {
    0: "#00BFFF",
    1: "#32CD32",
    2: "#FF0000",
    3: "#40FEFF",
    4: "#14CC99",
    5: "#00BAFF",
    6: "#0082B2",
    7: "#B25D7A",
    8: "#00FF17",
    9: "#006B49",
    10: "#00B27A",
    11: "#996B3D",
    12: "#CC7014",
    13: "#40FF8C",
    14: "#FF3400",
    15: "#ECBB5E",
    16: "#ECBB0C",
    17: "#B9D912",
    18: "#253A93",
    19: "#125FB9",
}

// var count = 0;
function moveIndicator2(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = trilhoContents2.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = trilhoContents2.scrollLeft;
    indicador2.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// indicador.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        indicador2.style.backgroundColor = color;
    }
}

// Set the indicator
moveIndicator2(trilho2.querySelector("[aria-selected=\"true\"]"), colours2[0]);


// Handle setting the currently active link
trilhoContents2.addEventListener("click", function(f) {
	var links = [].slice.call(document.querySelectorAll(".trilho_classe_Link2"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	f.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator2(f.target, colours2[links.indexOf(f.target)]);
});

* {
	box-sizing: inherit;
}

.menu_horizontal {
	position: relative;
	/*padding: 0 11px;*/
	box-sizing: border-box;
}

.trilho_classe {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
	/*Crush the whitespace here*/
	font-size: 0;
}

.trilho_classe_Contents {
	float: left;
	transition: transform .2s ease-in-out;
	position: relative;
}

.trilho_classe_Contents-no-transition {
	transition: none;
}

.trilho_classe_Link {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.trilho_classe_Indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100px;
	background-color: transparent;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}
	
.trilho_classe_Link2 {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

#caixas{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
	}
	#caixas2{
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 10px;
		
	}
		.conteudocaixas{
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
		}
		.imagemcaixas{
			margin-top: 5px;
			width: 12.15%;
			max-width: 170px;
			height: auto;
			display: inline-block;
		}
		.position_btcx{
			display: inline-block;
			margin: 6px 10px 0 0;
    		float: right;
		}
		.button_cx{
			background: #fff;
			height: 30px;
			width: 30px;
			border: 1px solid #000;
			border-radius: 5px;
			margin-right: 5px;
		}
		
	.caixa1{
		/*margin: 0 0.5% 0 0.5%;*/
	}
	.caixa2{
		/*margin: 0 0.5% 0 0.5%;*/
	}
	.logocx{
		width: 130px;
		height: 44px;
		float:  left;
		display: -webkit-box;
		background: #ddd;
		padding: 15px;
	}
	.logocx img{
		width: 15px;
	}
	.logocx p{
		color: black;
		font-size: 14px;
		font-family: sans-serif;
		margin-left: 5px;
		margin-top: 0;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="caixas">
	<div class="caixa1">
		<div class="menu_horizontal">
			<nav id="trilho" class="trilho_classe">
    
				<div id="trilhoContents" class="trilho_classe_Contents">
					<a onclick="mostra('item1');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="true">Galeria1</a>
					<a onclick="mostra('item2');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria2</a>
					<a onclick="mostra('item3');" style="cursor: hand;" href="#" class="trilho_classe_Link" aria-selected="false">Galeria3</a>
				<span id="indicador" class="trilho_classe_Indicator" style="transform: translateX(0px) scaleX(0.965781); background-color: rgb(0, 191, 255);"></span>
				</div>
				<div class="position_btcx">
					<button class="button_cx" type="button">&lt;</button>
					<button class="button_cx" type="button">&gt;</button>
				</div>
			</nav>
			<div id="item1" style="display: block;">
				<div class="conteudocaixas">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
				</div>
			</div>

			<div id="item2" style="display: none;">
				<div class="conteudocaixas">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
				</div>
			</div>

			<div id="item3" style="display: none;">
				<div class="conteudocaixas">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
				</div>
			</div>
		</div>
	</div>



	<div class="caixa1">
		<div class="menu_horizontal">
			<nav id="trilho2" class="trilho_classe">
				
				<div id="trilhoContents2" class="trilho_classe_Contents">
					<a onclick="exibe('item-1');" style="cursor: hand;" href="#" class="trilho_classe_Link2" aria-selected="true">Galeria1</a>
					<a onclick="exibe('item-2');" style="cursor: hand;" href="#" class="trilho_classe_Link2">Galeria2</a>
					<a onclick="exibe('item-3');" style="cursor: hand;" href="#" class="trilho_classe_Link2">Galeria3</a>
				<span id="indicador2" class="trilho_classe_Indicator"></span>
				</div>
				<div class="position_btcx">
					<button class="button_cx" type="button">&lt;</button>
					<button class="button_cx" type="button">&gt;</button>
				</div>
			</nav>
			<div id="item-1" style="display:block;">
				<div class="conteudocaixas">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
				</div>
			</div>

			<div id="item-2" style="display:none;">
				<div class="conteudocaixas">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/></a>
				</div>
			</div>

			<div id="item-3" style="display:none;">
				<div class="conteudocaixas">
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
					<a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/></a>
				</div>
			</div>
		</div>
	</div>
</div>

javascript html css javascript-eventos

asked by anonymous 07.09.2018 / 08:37

1 answer

Python - Doubt about imports in creating libraries Bootstrap Responsiveness - Problems with Grid

score 1 · Accepted Answer

There is a very simple library that can help you with this, which is dragscroll . Just import into your HTML file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragscroll/0.0.8/dragscroll.min.js"></script>

Andaddthedragscrollclassinthedivswiththeclasscontentdocuments

<divclass="conteudocaixas dragscroll">
  <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
  ...
</div>