Na página da web, você precisa alterar a posição dos vários elementos, que podem ser alcançados arrastando o elemento. Um atributo global Draggable é adicionado ao HTML5, que controla se o elemento pode ser arrastado definindo TRUE/FALSE.
Vamos tirar uma foto como exemplo e usar o jQuery para implementá -la: existem várias imagens na página, arraste uma imagem para o meio das outras duas imagens e, em seguida, a posição dessa imagem pode ser inserida entre as duas imagens.
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<estilo>
.img-div img {
Largura: 200px;
Altura: 200px;
flutuar: esquerda;
}
.img-div {
flutuar: esquerda;
}
.drop-left, .drop-right {
Largura: 50px;
Altura: 200px;
flutuar: esquerda;
}
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<Cript>
$ (document) .ready (function () {
// Div pai da imagem arrastada
var $ srcimgdiv = null;
// Comece a arrastar
$ (". img-div img"). bind ("dragstart", function () {
$ srcimgdiv = $ (this) .parent ();
});
// Eventos disparados ao arrastar acima .drop-left, .drop-right
$ (". Drop-left, .drop-right"). Bind ("dragover", função (evento) {
// Permitir arrastar e soltar deve ser definido através do evento.preventDefault ()
event.preventDefault ();
});
// termina o evento de arrastar e liberar o mouse
$ (". Drop-left"). Bind ("Drop", função (evento) {
event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). Antes ($ srcimgdiv);
}
});
$ (". Drop-right"). Bind ("Drop", função (evento) {
event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). Depois ($ srcimgdiv);
}
});
});
</script>
</head>
<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 é o evento que começa a arrastar o elemento, a dragover é o evento que arrasta acima do elemento e a queda é o evento que termina de arrastar e libera o mouse.
Draggable = "true" significa que o elemento IMG pode ser arrastado, mas, de fato, o IMG é arrastado por padrão, para que essa propriedade também possa ser removida. Se você deseja arrastar o elemento div, precisará definir draggable = "true".
Os elementos DIV com a esquerda e a direita de classe são colocados nos lados esquerdo e direito da imagem e são usados para receber outras imagens e arrastar-se para esta posição.