JavaScript - crear una lista de elementos que se puede ordenar con la interacción sortable

 
Vista:
sin imagen de perfil
Val: 9
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por Ariel (5 intervenciones) el 08/04/2020 01:30:08
Alguien puede ayudarme, quiero crear una lista de elementos que se puede ordenar con la interacción sortable, y verificar con un botón si están bien ordenados o no
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 9
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por Ariel (5 intervenciones) el 08/04/2020 21:26:54
Muchas gracias por atender a mi pregunta, la interacción sortable sirve para arrastar elementos así como drag and drop, tengo este código, y lo que quiero hacer es ordenar arrastrando según corresponda con la interacción sortable y que me salga un mensaje de alerta de si esta bien o no ordenado al presionar el botón, todo esta ya hecho pero no se como dar el mensaje de alerta de si esta bien o no ordenado.

Si por alguna razon no deja arrastrar la lista es porque tengo los jquery en mi carpeta de trabajo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<title>sortable</title>
 
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
 
<style>
.elemento{
width:300px;
height: 200px;
border: 4px solid black;mm
background: lightblue;
margin: 20px;
float: left;
}
 
.lista-seleccionable li{
width: 80%;
padding: 20px;
border: 1px solid #ccc;
list-style: none;
cursor: pointer;
}
 
ul .ui-selecting {background: green;}
ul .ui-selected {background: blue;}
</style>
</head>
<body>
<h1>Ordenar </h1>
<ul class="lista-seleccionable">
<li>Tercero</li>
<li>Quinto</li>
<li>Primero</li>
<li>Segundo</li>
<li>Cuarto</li>
</ul>
 
<button type="button">Verificar</button>
 
<script>
$(document).ready(function(){
$(".lista-seleccionable").sortable();
});
</script>
<body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por joel (895 intervenciones) el 09/04/2020 08:39:04
Ah, ya veo... es una librería de jquery!!! disculpa, como es el foro de JavaScript no pensé...

Para hacer lo que quieres, yo he pensado en utilizar el dataset... haber si te sirve este ejemplo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html lang="es">
<head>
    <meta charset="utf-8">
    <title>sortable</title>
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
    <style>
    .elemento{
        width:300px;
        height: 200px;
        border: 4px solid black;mm
        background: lightblue;
        margin: 20px;
        float: left;
    }
 
    .lista-seleccionable li{
        width: 80%;
        padding: 20px;
        border: 1px solid #ccc;
        list-style: none;
        cursor: pointer;
    }
 
    ul .ui-selecting {background: green;}
    ul .ui-selected {background: blue;}
    </style>
</head>
<body>
 
<h1>Ordenar </h1>
<ul class="lista-seleccionable">
    <li data-orden="3">Tercero</li>
    <li data-orden="5">Quinto</li>
    <li data-orden="1">Primero</li>
    <li data-orden="2">Segundo</li>
    <li data-orden="4">Cuarto</li>
</ul>
 
<button type="button" onclick="verificar()">Verificar</button>
 
<script>
$(".lista-seleccionable").sortable();
 
function verificar() {
    const elementos=[...document.querySelectorAll(".lista-seleccionable li")];
    if (elementos.every((el, index) => parseInt(el.dataset.orden)==index+1)) {
        alert("todos en orden");
    } else {
        alert("desordenados");
    }
}
</script>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 9
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por Ariel (5 intervenciones) el 09/04/2020 15:47:32
Muchas gracias, esto es lo que realmente quería averiguar, me ha servido demasiado
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por ScriptShow (692 intervenciones) el 08/04/2020 15:22:43
Saludos,

a ver si es algo así:

1
2
3
4
5
6
7
8
9
10
<button onclick="test()">Ordenar</button>
 
<script>
var list = ["Mesa", "Silla", "Agua", "Aire"];
 
function test(){
list.sort();
document.write(list);
}
</script>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 9
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por Ariel (5 intervenciones) el 08/04/2020 21:24:00
Muchas gracias por atender a mi pregunta, pero a lo que me refiero es diferente, tengo este código, y lo que quiero hacer es ordenar arrastrando según corresponda con la interacción sortable y que me salga un mensaje de alerta de si esta bien o no ordenado al presionar el botón, todo esta ya hecho pero no se como dar el mensaje de alerta de si esta bien o no ordenado

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>sortable</title>
 
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>
 
		<style>
			.elemento{
				width:300px;
				height: 200px;
				border: 4px solid black;mm
				background: lightblue;
				margin: 20px;
				float: left;
			}
 
			.lista-seleccionable li{
				width: 80%;
				padding: 20px;
				border: 1px solid #ccc;
				list-style: none;
				cursor: pointer;
			}
 
			ul .ui-selecting {background: green;}
			ul .ui-selected {background: blue;}
		</style>
	</head>
	<body>
		<h1>Ordenar </h1>
		<ul class="lista-seleccionable">
			<li>Tercero</li>
			<li>Quinto</li>
			<li>Primero</li>
			<li>Segundo</li>
			<li>Cuarto</li>
		</ul>
 
		<button type="button">Verificar</button>
 
		<script>
			$(document).ready(function(){
			$(".lista-seleccionable").sortable();
			});
		</script>
	<body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 9
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

crear una lista de elementos que se puede ordenar con la interacción sortable

Publicado por Ariel (5 intervenciones) el 08/04/2020 21:42:55
Si por alguna razon no deja arrastrar la lista es porque tengo los jquery en mi carpeta de trabajo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar