En la página web, debe cambiar la posición de múltiples elementos, que se puede lograr arrastrando el elemento. Se agrega un atributo global arrastrable a HTML5, que controla si el elemento se puede arrastrar configurando verdadero/falso.
Tomemos la imagen de la foto como ejemplo y usemos jQuery para implementarlo: hay varias imágenes en la página, arrastre una imagen al centro de las otras dos imágenes, y luego la posición de esta imagen se puede insertar entre las dos imágenes.
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<estilo>
.img-div img {
Ancho: 200px;
Altura: 200px;
flotante: izquierda;
}
.Img-Div {
flotante: izquierda;
}
.drop-izquierda, .drop-right {
Ancho: 50px;
Altura: 200px;
flotante: izquierda;
}
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<script>
$ (documento) .Ready (function () {
// Padre Div de la imagen arrastrada
var $ srcimgdiv = null;
// comienza a arrastrar
$ (". IMG-DIV IMG"). Bind ("DragStart", function () {
$ srcimgdiv = $ (this) .parent ();
});
// eventos disparados al arrastrar por encima .drop-izquierda, .drop-right
$ (".
// Permitir arrastrar y soltar se debe establecer a través de Event.PreventDefault ()
event.preventDefault ();
});
// finalizar el evento de arrastrar y soltar el mouse
$ (". Drop-left"). Bind ("Drop", function (Event) {
event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). ANTES ($ srcImgDiv);
}
});
$ (". Drop-Right"). Bind ("Drop", Function (Event) {
event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). After ($ srcimgdiv);
}
});
});
</script>
</ablo>
<Body>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/38538/f/6864556.jpg" draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/6695960.jpg" draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/6683901.jpg" draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/5121337.jpg" draggable = "true">
<div> </div>
</div>
</body>
</html>
Dragstart es el evento que comienza a arrastrar el elemento, Dragover es el evento que se arrastra por encima del elemento y la caída es el evento que termina arrastrando y libera el mouse.
draggable = "true" significa que el elemento IMG se puede arrastrar, pero de hecho, IMG es arrastrable de forma predeterminada, por lo que esta propiedad también se puede eliminar. Si desea arrastrar el elemento div, debe establecer draggable = "true".
Los elementos DIV con clase-izquierda y caída de la clase se colocan en los lados izquierdo y derecho de la imagen, y se utilizan para recibir otras imágenes y arrastrar a esta posición.