mover dois elementos ao mesmo tempo

[Biel. 9]

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>

 

[Jack Oliveira 1]

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);

 

[Biel. 9]

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 .

[Marcos_imasters 288]

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);