Jump to content
Biel.

mover dois elementos ao mesmo tempo

Recommended Posts

Olá pessoal. O Código abaixo está funcionando e move um elemento por vez com ajuda da seta. Até aqui tudo ok. Quero mover dois elementos por vez e para isso adicionei o elemento input no código e quero muito que funcione da seguinte forma:

ao mover menuA para 2º posição, inputA também tem que ir para 2º posição ou 
ao mover menuA para 3º posição, inputA também tem que ir para 3º posição ou 
-----------
ao mover menuB para 1º posição, inputB também tem que ir para 1º posição ou 
ao mover menuB para 3º posição, inputB também tem que ir para 3º posição ou 
-----------
ao mover menuC para 1º posição, inputC também tem que ir para 1º posição ou 
ao mover menuC para 2º posição, inputC também tem que ir para 2º posição 

 

Nota: o campo input não é pra ser clicado por este motivo deixei disabled. 

 

<style>
*{ margin: 0; padding: 0; }
.divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;}

.divPaiCor{ flex:1; margin-right: 10px; }
.h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; }

.divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;}
.b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default;  }

.divPaiSeta b:hover {
  background: #000;
  color: #fff;
  cursor: pointer;
}

.divPaiSeta b:active {
  background: gray;
  color: #000;
  user-select: none;
}

.divPaiCor h1:hover{
  background: #000;
  color: #fff;
  cursor: pointer;
}

.selectedItem {
  background: #000;
  color: #fff;
}

</style>

<div class="divPrincipal"> 

<div class="divPaiCor"> 
 

<h1 class="h1_1">menuA </h1>
<h1 class="h1_1">menuB </h1>
<h1 class="h1_1">menuC </h1>
<hr>
<input type="text" class="inputA" disabled  value="inputA">
<input type="text" class="inputB" disabled  value="inputB">
<input type="text" class="inputC" disabled  value="inputC">
</div>

<div class="divPaiSeta"> 
<b id="id1"  class="b_1">⇧ </b>
<b id="id2"  class="b_1">⇩ </b>
</div>

</div>


<script>
  
let indexSelected;
let elementSelected;
let divPaiCor 	= document.querySelector(".divPaiCor");
let arrowUp 	= document.querySelector("#id1");
let arrowDown	 = document.querySelector("#id2");

function setaPraCima(){
  let x = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected - 1);
  divPaiCor.insertBefore(elementSelected, x[indexSelected]);
}

function setaPraBaixo(){
  let y = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected + 1);
  divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling);
}

function returnPositionIndex(index) {
  let min = 0, max = 2;
  
  if(index <= min){ return min; }
  if(index >= max){ return max; }
  if(index > min || index < max){ return index; }
}
    
function selectItem(refItem) {
  let allElements = [...refItem.target.parentNode.children];
  let index = allElements.indexOf(refItem.target);
  
  allElements.map(item => item.classList.remove("selectedItem"));
  refItem.target.classList.add("selectedItem");
  
  indexSelected = index;
  elementSelected = refItem.target;
}

divPaiCor.addEventListener("click", selectItem);
arrowUp.addEventListener("click", setaPraCima);
arrowDown.addEventListener("click", setaPraBaixo);

</script>

 

Share this post


Link to post
Share on other sites

SImples segue o exemplo

index.php

		<div id="resp"></div>
		<ul id="Order">
			<?php
			$query = "SELECT * FROM tab_aprendiz ORDER BY ordem ASC";
			$aprendiz = mysqli_query($conn, $query);
			while($row = mysqli_fetch_assoc($aprendiz)){
				?>
				<li id="arrayordem_<?php echo $row['id']; ?>">
					<?php
					echo $row['id'] . " - ";
					echo $row['titulo'];
					?>
				</li>
				<?php
			}
			?>
		</ul>
		ul{
			padding: 0px;
			margin: 0px;
		}
		#Order li{
			background-color: #1aad72;
			color: #fff;
			margin: 0 0 3px;
			padding: 10px;
			list-style: none;
		}
		<script>
			$(document).ready(function () {
                $(function () {
                    $("#Order").sortable({update: function () {
							var ordem_atual = $(this).sortable("serialize");
							$.post("aprendiz_ordem.php", ordem_atual, function (retorno) {
								$("#resp").html(retorno);
								$("#resp").slideDown('slow');
								retirarMsg();
							});
						}
                    });
                });
				
				function retirarMsg(){
					setTimeout( function (){
						$("#resp").slideUp('slow', function(){});
					}, 1700);
				}
            });
		</script>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

aprendiz_ordem.php

include_once "dbBase.php";
$array = $_POST['arrayordem'];

$cont = 1;
foreach($array as $id){
	$result = "UPDATE tab_aprendiz SET ordem = $cont WHERE id = $id";
	$resultado = mysqli_query($conn, $result);	
	$cont++;
}
echo "<span style='color: green;'>Alterado com sucesso</span>";

SQL

CREATE TABLE `tab_aprendiz` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `titulo` varchar(255) DEFAULT NULL,
  `ordem` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `tab_aprendiz` (`id`, `titulo`, `ordem`) VALUES
(NULL, 'Teste 1', 2),
(NULL, 'Teste 2', 4),
(NULL, 'Teste 3', 5),
(NULL, 'Teste 4', 3),
(NULL, 'Teste 5', 6),
(NULL, 'Teste 6', 7),
(NULL, 'Teste 7', 1);

 

Share this post


Link to post
Share on other sites
Em 10/06/2023 at 17:55, Jack Oliveira disse:

SImples segue o exemplo

index.php


		<div id="resp"></div>
		<ul id="Order">
			<?php
			$query = "SELECT * FROM tab_aprendiz ORDER BY ordem ASC";
			$aprendiz = mysqli_query($conn, $query);
			while($row = mysqli_fetch_assoc($aprendiz)){
				?>
				<li id="arrayordem_<?php echo $row['id']; ?>">
					<?php
					echo $row['id'] . " - ";
					echo $row['titulo'];
					?>
				</li>
				<?php
			}
			?>
		</ul>

		ul{
			padding: 0px;
			margin: 0px;
		}
		#Order li{
			background-color: #1aad72;
			color: #fff;
			margin: 0 0 3px;
			padding: 10px;
			list-style: none;
		}

		<script>
			$(document).ready(function () {
                $(function () {
                    $("#Order").sortable({update: function () {
							var ordem_atual = $(this).sortable("serialize");
							$.post("aprendiz_ordem.php", ordem_atual, function (retorno) {
								$("#resp").html(retorno);
								$("#resp").slideDown('slow');
								retirarMsg();
							});
						}
                    });
                });
				
				function retirarMsg(){
					setTimeout( function (){
						$("#resp").slideUp('slow', function(){});
					}, 1700);
				}
            });
		</script>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

aprendiz_ordem.php


include_once "dbBase.php";
$array = $_POST['arrayordem'];

$cont = 1;
foreach($array as $id){
	$result = "UPDATE tab_aprendiz SET ordem = $cont WHERE id = $id";
	$resultado = mysqli_query($conn, $result);	
	$cont++;
}
echo "<span style='color: green;'>Alterado com sucesso</span>";

SQL


CREATE TABLE `tab_aprendiz` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `titulo` varchar(255) DEFAULT NULL,
  `ordem` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `tab_aprendiz` (`id`, `titulo`, `ordem`) VALUES
(NULL, 'Teste 1', 2),
(NULL, 'Teste 2', 4),
(NULL, 'Teste 3', 5),
(NULL, 'Teste 4', 3),
(NULL, 'Teste 5', 6),
(NULL, 'Teste 6', 7),
(NULL, 'Teste 7', 1);

 

Jack, obrigado por postar ; estamos chagando lá.. Veja: preciso que a solução  seja com base no código que postei sem php e com javascript puro. O código que postei está funcionando. Quero que pra onde for menuA ,inputA vai também ou pra onde for menuB, inputB vai também ou pra onde for menuC, inputC vai também conforme postei acima .

Share this post


Link to post
Share on other sites
Em 10/06/2023 at 14:00, Biel. disse:

Olá pessoal. O Código abaixo está funcionando e move um elemento por vez com ajuda da seta. Até aqui tudo ok. Quero mover dois elementos por vez e para isso adicionei o elemento input no código e quero muito que funcione da seguinte forma:

ao mover menuA para 2º posição, inputA também tem que ir para 2º posição ou 
ao mover menuA para 3º posição, inputA também tem que ir para 3º posição ou 
-----------
ao mover menuB para 1º posição, inputB também tem que ir para 1º posição ou 
ao mover menuB para 3º posição, inputB também tem que ir para 3º posição ou 
-----------
ao mover menuC para 1º posição, inputC também tem que ir para 1º posição ou 
ao mover menuC para 2º posição, inputC também tem que ir para 2º posição 

 

Nota: o campo input não é pra ser clicado por este motivo deixei disabled. 

 


<style>
*{ margin: 0; padding: 0; }
.divPrincipal{ width: 200px; display: flex; flex-wrap: wrap; align-items: center; border: 2px solid blue;}

.divPaiCor{ flex:1; margin-right: 10px; }
.h1_1{ padding: 4px 4px; margin-bottom: 2px; background-color:#c1c1c1; cursor: default; }

.divPaiSeta{ flex:0.5; font-size: 30px; text-align: center;}
.b_1{ padding: 0px 4px; margin: 8px 10px; background-color:#cfcfcf; display: block; border: 1px solid green; cursor: default;  }

.divPaiSeta b:hover {
  background: #000;
  color: #fff;
  cursor: pointer;
}

.divPaiSeta b:active {
  background: gray;
  color: #000;
  user-select: none;
}

.divPaiCor h1:hover{
  background: #000;
  color: #fff;
  cursor: pointer;
}

.selectedItem {
  background: #000;
  color: #fff;
}

</style>

<div class="divPrincipal"> 

<div class="divPaiCor"> 
 

<h1 class="h1_1">menuA </h1>
<h1 class="h1_1">menuB </h1>
<h1 class="h1_1">menuC </h1>
<hr>
<input type="text" class="inputA" disabled  value="inputA">
<input type="text" class="inputB" disabled  value="inputB">
<input type="text" class="inputC" disabled  value="inputC">
</div>

<div class="divPaiSeta"> 
<b id="id1"  class="b_1">⇧ </b>
<b id="id2"  class="b_1">⇩ </b>
</div>

</div>


<script>
  
let indexSelected;
let elementSelected;
let divPaiCor 	= document.querySelector(".divPaiCor");
let arrowUp 	= document.querySelector("#id1");
let arrowDown	 = document.querySelector("#id2");

function setaPraCima(){
  let x = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected - 1);
  divPaiCor.insertBefore(elementSelected, x[indexSelected]);
}

function setaPraBaixo(){
  let y = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected + 1);
  divPaiCor.insertBefore(elementSelected, y[indexSelected].nextSibling);
}

function returnPositionIndex(index) {
  let min = 0, max = 2;
  
  if(index <= min){ return min; }
  if(index >= max){ return max; }
  if(index > min || index < max){ return index; }
}
    
function selectItem(refItem) {
  let allElements = [...refItem.target.parentNode.children];
  let index = allElements.indexOf(refItem.target);
  
  allElements.map(item => item.classList.remove("selectedItem"));
  refItem.target.classList.add("selectedItem");
  
  indexSelected = index;
  elementSelected = refItem.target;
}

divPaiCor.addEventListener("click", selectItem);
arrowUp.addEventListener("click", setaPraCima);
arrowDown.addEventListener("click", setaPraBaixo);

</script>

 

let indexSelected;
let elementSelected;
let divPaiCor = document.querySelector(".divPaiCor");
let arrowUp = document.querySelector("#id1");
let arrowDown = document.querySelector("#id2");

function setaPraCima() {
  let x = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected - 1);

  if (indexSelected > 0) {
    divPaiCor.insertBefore(elementSelected, x[indexSelected - 1]);
    divPaiCor.insertBefore(x[indexSelected], x[indexSelected - 1]);
  }
}

function setaPraBaixo() {
  let y = document.querySelectorAll(".h1_1");
  indexSelected = returnPositionIndex(indexSelected + 1);

  if (indexSelected < y.length - 1) {
    divPaiCor.insertBefore(y[indexSelected + 1], y[indexSelected]);
  }
}

function returnPositionIndex(index) {
  let min = 0, max = 2;

  if (index <= min) { return min; }
  if (index >= max) { return max; }
  if (index > min || index < max) { return index; }
}

function selectItem(refItem) {
  let allElements = [...refItem.target.parentNode.children];
  let index = allElements.indexOf(refItem.target);

  allElements.map(item => item.classList.remove("selectedItem"));
  refItem.target.classList.add("selectedItem");

  indexSelected = index;
  elementSelected = refItem.target;
}

divPaiCor.addEventListener("click", selectItem);
arrowUp.addEventListener("click", setaPraCima);
arrowDown.addEventListener("click", setaPraBaixo);

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • By Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.