Drag y Drop son parte del estándar HTML5.
Soporte del navegador
Internet Explorer 9, Firefox, Opera 12, Chrome y Safari 5 admiten arrastrar y soltar.
Elemento de arrastre, Dragelement:
1. Agregar evento: OndragStart 2. Agregar atributos: dragableElemento de lugar, DropElement:
1. Agregar eventos: Ondargenter, Ondragover, Ondragleave, Ondragend, Ondrop
Es similar a los incidentes del mouser en la clasificación, y se entiende bien.
1. Arrastre y suelte entre elementos en la página
Usemos un pequeño ejemplo a continuación, se muestra el arrastre y la caída entre el DIV, cómo se activa cada evento:
<! src = ../../jquery-1.8.3.js type = text/javaScript charset = utf-8> </script> <script type = text/javascript>/*** drag (arrastre y solto) es. Componente estándar HTML5. * El navegador admite* Internet Explorer 9, Firefox, Opera 12, Chrome y Safari 5 Admite arrastrar y soltar. * / $ (fuins () {$ (#dragele) [0] .ondragStart = function (event) {console.log (drawStart); event.datatransfer.setData (text, event.target.id);}; /* * * Cuando se colocan los datos de arrastre, ocurre el evento de caída. p] + @@);} * / console.log (ondrop); ) .d (div) .length)); ;} $ (#Dropele) [0] .ondragleave = function (event) {console.log (Ondrop Leave); cabeza> <body> <Div style = Border: 1px Red sólido; : 330px;Necesitas prestar atención a:
R. Ontragover debe organizar el comportamiento predeterminado del evento.
B. El comportamiento predeterminado del evento de caída se abre en un enlace, por lo que también debe evitar su comportamiento predeterminado.
También es posible notar que al arrastrar y soltar, el evento contiene un evento. y copiarlo.
Aquí hay otros métodos del objeto:
Event.datatransfer:
elementos = [Object DataTransferntemList] @@ drag_drop.html: 44
Archivos = [Object Filelist] @@ drag_drop.html: 44
Tipos = texto/simple @@ drag_drop.html: 44
EffectAlowed = all @@ drag_drop.html: 44
Dropeffect = ninguno @@ drag_drop.html: 44
clearTata = function cleanata () {[código nativo]} @@ drag_drop.html: 44
getData = fuory getData () {[código nativo]} @@ drag_drop.html: 44
setData = function setData () {[código nativo]} @@ drag_drop.html: 44
setDragImage = function setDragImage () {[código nativo]} @@
Usé JS para imprimir todos sus atributos:
1. GetData, los ejemplos de SetData se han utilizado en el ejemplo anterior, ClearData es borrar los datos de configuración.
2. Vale la pena señalar que los archivos.
3. SetDragimage (Image, X, Y) se usa para establecer las representaciones de moverse con el mouse durante el movimiento del mouse. Debe estar configurado en DragStart.
4. Los tipos, efectivos y dropfecting son los tipos de arrastre al elemento.
Lo anterior es todo el contenido de este artículo.