├── img
├── 1.png
├── 2.png
├── 3.png
├── 4.png
├── 5.png
├── 6.png
├── 7.png
└── thumb.png
├── README.md
├── js
└── main.js
├── css
└── estilos.css
└── index.html
/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/1.png
--------------------------------------------------------------------------------
/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/2.png
--------------------------------------------------------------------------------
/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/3.png
--------------------------------------------------------------------------------
/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/4.png
--------------------------------------------------------------------------------
/img/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/5.png
--------------------------------------------------------------------------------
/img/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/6.png
--------------------------------------------------------------------------------
/img/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/7.png
--------------------------------------------------------------------------------
/img/thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/drag-and-drop/HEAD/img/thumb.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Drag and Drop (arrastra y suelta) en Javascript | SortableJS
2 | ### [Tutorial: https://youtu.be/-N515SDoYuU](https://youtu.be/-N515SDoYuU)
3 |
4 | 
5 |
6 | Por: [FalconMasters](http://www.falconmasters.com)
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | const lista = document.getElementById('lista');
2 |
3 | Sortable.create(lista, {
4 | animation: 150,
5 | chosenClass: "seleccionado",
6 | // ghostClass: "fantasma"
7 | dragClass: "drag",
8 |
9 | onEnd: () => {
10 | console.log('Se inserto un elemento');
11 | },
12 | group: "lista-personas",
13 | store: {
14 | // Guardamos el orden de la lista
15 | set: (sortable) => {
16 | const orden = sortable.toArray();
17 | localStorage.setItem(sortable.options.group.name, orden.join('|'));
18 | },
19 |
20 | // Obtenemos el orden de la lista
21 | get: (sortable) => {
22 | const orden = localStorage.getItem(sortable.options.group.name);
23 | return orden ? orden.split('|') : [];
24 | }
25 | }
26 | });
--------------------------------------------------------------------------------
/css/estilos.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | background: #E3E5EB;
9 | font-family: 'Open Sans', sans-serif;
10 | min-height: 100vh;
11 | display: flex;
12 | align-items: center;
13 | justify-content: center;
14 | }
15 |
16 | .contenedor {
17 | width: 90%;
18 | max-width: 900px;
19 | }
20 |
21 | .contenedor-lista {
22 | background: #F3F5FA;
23 | box-shadow: 0px 0px 20px rgba(149, 153, 159, .16);
24 | border-radius: 10px;
25 | }
26 |
27 | .contenedor-lista h1 {
28 | text-transform: uppercase;
29 | font-size: 20px;
30 | background: #fff;
31 | height: 100px;
32 | display: flex;
33 | align-items: center;
34 | padding: 40px;
35 | border-radius: 10px 10px 0 0;
36 | margin-bottom: 0;
37 | }
38 |
39 | .lista {
40 | padding: 40px;
41 | width: 100%;
42 | }
43 |
44 | .lista .persona {
45 | background: #fff;
46 | display: grid;
47 | grid-template-columns: auto 1fr 1fr 1fr;
48 | align-items: center;
49 | padding: 20px;
50 | border-radius: 10px;
51 | margin-bottom: 20px;
52 | cursor: move;
53 | }
54 |
55 |
56 |
57 | /* ? Clases para los estilos en los diferentes estados del drag and drop */
58 | .lista .persona.seleccionado {
59 | transform: scale(1.02) rotate(-1deg);
60 | box-shadow: 0px 0px 20px rgba(149, 153, 159, .16);
61 | }
62 |
63 | .lista .persona.fantasma {
64 | border: 2px dotted #000;
65 | }
66 |
67 | .lista .persona.drag {
68 | opacity: 0;
69 | }
70 | /* ? ------- */
71 |
72 |
73 |
74 | .lista .label {
75 | text-transform: uppercase;
76 | font-weight: 600;
77 | margin-bottom: 5px;
78 | color: #5173CF;
79 | }
80 |
81 | .lista .dato {
82 | font-weight: bold;
83 | font-size: 20px;
84 | }
85 |
86 | .lista .persona img {
87 | width: 70px;
88 | border-radius: 100%;
89 | margin-right: 40px;
90 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Listas con Drag and Drop || SortableJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
Drag and Drop con Javascript
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Nombre
25 |
Carlos Arturo
26 |
27 |
31 |
32 |
Correo
33 |
carlos@gmail.com
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
Nombre
44 |
Alejandro
45 |
46 |
50 |
51 |
Correo
52 |
alejandro@gmail.com
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
Nombre
63 |
Stephanie
64 |
65 |
69 |
70 |
Correo
71 |
stephanie@gmail.com
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
Nombre
82 |
Mike
83 |
84 |
88 |
89 |
Correo
90 |
mike@gmail.com
91 |
92 |
93 |
94 |
95 |