Arrastre y cae es una característica común, es decir, arrastre a otra posición después del objeto de captura.
En HTML5, Drag and Drop es una parte estándar, y cualquier elemento se puede arrastrar y soltar.
Internet Explorer 9+, Firefox, Opera, Chrome y Safari admiten arrastre.
Nota: Safari 5.1.2 no es compatible con Drag.Ejemplo:
<! estilo> <script> function alowdrop (ev) {ev.preventDefault ();} function drag (ev) {ev.datatransfer.setData (text, evraget.id);} function op (ev) {ev. var data = ev.datatransfer.getData (text); = Drag1 src = img /bg_1.jpg draggable = true onDragStart = drag (event) width = 300px heig ht = 180px /> </body> < /html>En primer lugar, para que el elemento sea arrastrado, configure la propiedad arrastrable en verdadero: <img draggable = true>
Luego se especifica lo que sucede cuando se arrastra el elemento.
En el ejemplo anterior, la propiedad OndragStart llama a una función, arrastre (evento), que especifica los datos arrastrados.
Método dataTransfer.setData () Establezca el tipo de datos y el valor de los datos de arrastre de datos: Función drag (ev) {ev.datatransfer.setData (text, ev.target.id);}En este ejemplo, el tipo de datos es texto, y el valor es ID (Drag1) que puede arrastrar el elemento.
El evento Ondragover estipula dónde colocar los datos arrastrados.Predeterminado, los datos/elementos no se pueden colocar en otros elementos. Si necesita establecer la ubicación permitida, debemos evitar el procesamiento predeterminado de elementos.
这要通过调用ondragover 事件的event.preventDefault() 方法：event.preventDefault()
当放置被拖数据时，会发生drop 事件。
En el ejemplo anterior, el atributo ONDROP llama a una función, Drop (evento):
Function drop (ev) {ev.preventDefault ();Explicación del código:
Llame a PreventDefault () para evitar el procesamiento predeterminado del navegador de los datos (el comportamiento predeterminado del evento de caída se abre en un enlace)
Obtenga los datos arrastrados a través del método DataTransfer.getData (texto) . Este método volverá a cualquier datos del mismo tipo en el método setData ().
Los datos de arrastre es la ID del elemento de arrastre (drag1)
Elemento de arrastre adicional al elemento de colocación (elemento objetivo)
Arrastre de un lado a otro:Si desea arrastrar de un lado a otro en dos lugares, simplemente modifique el código anterior.
Cambiar el código en el cuerpo:
<body> <div id = div1 ondrop = drop (event) ondragover = allowdrop (event)> <img id = drag1 src = img/bg_1.jpg draggable = true vent) width = 300px Height = 180px/> </div> <div id = div2 ondrop = drop (event) onDragover = tampdop (evento)> </div> </body>
Luego agregue#div2 al estilo de estilo:
<Type de estilo = text/css> #div1, #div2 {ancho: 360px;这样就可以实现来回拖放了。
Lo anterior es todo el contenido de este artículo.