Código de JavaScript - Arrastras y soltar elementos de una lista con JavaScript

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 16 de Mayo del 2018 (Publicado el 14 de Mayo del 2018)gráfica de visualizaciones de la versión: Versión 1.0
1.417 visualizaciones desde el 14 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<head>
    <style>
    #columns {
        padding:0;
        margin:0;
    }
    #columns>li {
        list-style:none;
        width: 150px;
        border: 1px solid #666666;
        background-color: #eee;
        margin-top: 5px;
        box-shadow: inset 0 0 3px #000;
        text-align: center;
        cursor: ns-resize;
        padding:5px;
    }
    #columns>li.over {
        border: 1px dashed #000;
    }
    </style>
</head>
 
<body>
 
    <ul id="columns">
      <li draggable="true">A</li>
      <li draggable="true">B</li>
      <li draggable="true">C</li>
      <li draggable="true">D</li>
    </div>
 
</body>
</html>
 
<script>
/**
 * Inicio del movimiento de arraste de un elemento con draggable="true"
 * @param element e hace referencia al elemento que estamos arrastrando
 */
function handleDragStart(e) {
    this.style.opacity = '0.4';  // this / e.target is the source node.
 
    dragSrcEl = this;
 
    // especificamos que vamos a mover el elemento
    e.dataTransfer.effectAllowed = 'move';
 
    e.dataTransfer.setData('text/html', this.innerHTML);
}
 
/**
 * Final del movimiento de arrastre de un elemento con draggable="true"
 * @param element e hace referencia al elemento que estamos arrastrando
 */
function handleDragEnd(e) {
    this.style.opacity = '1';  // this / e.target is the source node.
}
 
/**
 * Evento que se ejecuta cuando se suelta el elemento
 * @param element e hace referencia al elemento donde lo vamos a soltar
 */
function handleDrop(e) {
    // this / e.target is current target element.
    if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.
    }
 
    this.classList.remove('over');
 
    // No hacemos nada, si el elemento origin es el mismo que el destino
    if (dragSrcEl != this) {
        // Set the source column's HTML to the HTML of the columnwe dropped on.
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
    }
 
    return false;
}
 
 
/**
 * Evento que se ejecuta al pasar el elemento sobre otro elemento draggable="true"
 * @param element e hace referencia al elemento por el que pasamos por encima
 */
function handleDragEnter(e) {
    // this / e.target is the current hover target.
    this.classList.add('over');
 
    // Especificamos que estamos moviendo el elemento a una nueva ubicación
    e.dataTransfer.dropEffect = 'move';
}
 
/**
 * Evento que se ejecuta mientras pasamos por encima de un elemento draggable="true"
 * @param element e hace referencia al elemento por el que pasamos por encima
 */
function handleDragOver(e) {
    //Cuando se arrastra un elemento como un enlace, hay que impedir el comportamiento
    // predeterminado del navegador, que es abrir la página a la que dirige el enlace.
    // Para ello, se debe llamar a e.preventDefault()
 
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.
    }
 
    // Especificamos que estamos moviendo el elemento a una nueva ubicación
    e.dataTransfer.dropEffect = 'move';
 
    return false;
}
 
/**
 * Evento que se ejecuta cuando dejamos de pasar el elemento sobre otro elemento draggable="true"
 * @param element e hace referencia al elemento al que dejamos de pasar por encima
 */
function handleDragLeave(e) {
    // this / e.target is the current hover target.
    this.classList.remove('over');
}
 
/**
 * Definimos todos los eventos para cada elemento de la lista
 */
var cols = document.querySelectorAll('#columns>li');
cols.forEach(function(col){
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragenter', handleDragEnter, false);
    col.addEventListener('dragover', handleDragOver, false);
    col.addEventListener('dragleave', handleDragLeave, false);
    col.addEventListener('drop', handleDrop, false);
    col.addEventListener('dragend', handleDragEnd, false);
});
</script>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
15 de Junio del 2018
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4599