Comentario: Siempre ha sido lo que los internautas quieren ver si no usan JavaScript para lograr el efecto de arrastre y caída. Hoy, HTML5 le ha hecho una introducción detallada a continuación. Los amigos que necesitan saber pueden referirse a él.
En el desarrollo web, necesitamos usar JavaScript para lograr el efecto de arrastrar y soltar. Hoy implementemos con HTML5:
Veamos primero el código Core HTML:
<div>
<p> arrastre pequeños cuadrados amarillos en una caja roja grande </p>
</div>
<div draggable = "true">
</div>
<div>
</div>
La propiedad arrastrable es recientemente agregada por HTML5. Tiene tres valores: Verdadero, Falso, Auto. Verdadero se arrastra, False no está permitido. Auto depende de si el navegador del usuario lo admite. Para obtener más información, consulte la documentación oficial.
Agregue un pequeño estilo:
<style type = "text/css">
#gota
{
Ancho: 300px;
Altura: 200px;
Color de fondo: #FF0000;
relleno: 5px;
borde: 2px Solid #000000;
}
#artículo
{
Ancho: 100px;
Altura: 100px;
Color de fondo: #FFFF00;
relleno: 5px;
margen: 20px;
borde: 1px discontinuo #000000;
}
*[draggable = true] {
-Moz-User-Select: Ninguno;
-khtml-user-drag: elemento;
cursor: mover;
}
*:-khtml-drag {
Color de fondo: RGBA (238,238,238, 0.5);
}
</style>
Entonces veamos JavaScript:
funciones listEnvent (eventTarget, eventType, eventHandler) {
if (eventTarget.addeventListener) {
eventTarget.addeventListener (eventType, eventHandler, falso);
} else if (eventTarget.attachevent) {
eventtype = "on" + eventtype;
eventTarget.attachevent (eventtype, eventHandler);
} demás {
eventTarget ["on" + eventtype] = eventHandler;
}
}
// Cancelar evento
función canceleVent (evento) {
if (event.preventDefault) {
event.preventDefault ();
} demás {
event.returnValue = false;
}
}
// cancelar la propagación
función cancelPropagation (evento) {
if (event.stoppropagation) {
event.stopPropagation ();
} demás {
event.cancelBubble = true;
}
}
window.onload = function () {
var Target = document.getElementById ("Drop");
listEnvent (Target, "Dragenter", CancelEvent);
listEnvent (objetivo, "dragover", dragover);
listEnvent (Target, "Drop", Function (EVT) {
cancelPropagation (EVT);
EVT = EVT || Window.event;
evt.datatransfer.dropeffect = 'copy';
var id = evt.datatransfer.getData ("texto");
Target.appendChild (document.getElementById (id));
});
var item = document.getElementById ("item");
item.SetAttribute ("Draggable", "True");
listEnvent (elemento, "dragStart", function (evt) {
EVT = EVT || Window.event;
evt.datatransfer.effectallowed = 'copy';
evt.datatransfer.setData ("Text", item.id);
});
};
function dragover (evt) {
if (evt.preventDefault) evt.preventDefault ();
EVT = EVT || Window.event;
evt.datatransfer.dropeffect = 'copy';
devolver falso;
}
Desde el código anterior, observamos los eventos de arrastrar y soltar proporcionados por el uso de un conjunto de HTML5, y observamos directamente lo siguiente:
arrastrar
El evento de arrastre comienza.
arrastrar
Durante la operación de arrastre.
dragenter
Drag está sobre el objetivo; Se utiliza para determinar si el objetivo aceptará la caída.
Dragaver
Drag está sobre el objetivo; utilizado para determinar la retroalimentación al usuario.
gota
Se produce caída.
dragleave
Arrastra las hojas de hojas.
dragar
La operación de arrastre termina.
Definir eventos relacionados para implementar la función deseada. El JS anterior no es difícil de entender.
Puedes probarlo tú mismo. Actualmente, admite lo mejor en Opera, pero el efecto IE no es bueno.
Espero que sea útil para su desarrollo web.