Di halaman web, Anda perlu mengubah posisi beberapa elemen, yang dapat dicapai dengan menyeret elemen. Atribut global yang dapat ditagih ditambahkan ke HTML5, yang mengontrol apakah elemen dapat diseret dengan mengatur benar/false.
Mari kita ambil seret gambar sebagai contoh dan gunakan jQuery untuk mengimplementasikannya: ada beberapa gambar di halaman, seret satu gambar ke tengah dua gambar lainnya, dan kemudian posisi gambar ini dapat dimasukkan di antara kedua gambar.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<tyle>
.img-div img {
Lebar: 200px;
Tinggi: 200px;
float: kiri;
}
.img-div {
float: kiri;
}
.drop-left, .drop-right {
Lebar: 50px;
Tinggi: 200px;
float: kiri;
}
</tyle>
<skrip src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<script>
$ (dokumen) .ready (function () {
// div induk dari gambar yang diseret
var $ srcimgdiv = null;
// Mulai menyeret
$ (". IMG-DIV IMG"). BIND ("DragStart", function () {
$ srcimgdiv = $ (ini) .parent ();
});
// acara ditembakkan saat menyeret di atas .drop-left, .drop-right
$ (". Drop-left, .drop-right"). bind ("dragover", function (event) {
// Izinkan seret dan jatuhkan harus diatur melalui event.preventdefault ()
event.preventdefault ();
});
// Akhiri acara menyeret dan melepaskan mouse
$ (". Drop-left"). bind ("drop", function (event) {
event.preventdefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (ini) .parent (). Sebelum ($ srcimgdiv);
}
});
$ (". Drop-right"). Bind ("drop", function (event) {
event.preventdefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (ini) .parent (). Setelah ($ 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 adalah peristiwa yang mulai menyeret elemen, Dragover adalah peristiwa yang menyeret di atas elemen, dan drop adalah peristiwa yang berakhir menyeret dan melepaskan mouse.
Draggable = "true" berarti bahwa elemen IMG dapat diseret, tetapi pada kenyataannya, IMG dapat diseret secara default, sehingga properti ini juga dapat dihapus. Jika Anda ingin menyeret elemen Div, Anda harus mengatur draggable = "true".
Elemen div dengan drop-left dan drop-right ditempatkan di sisi kiri dan kanan gambar, dan digunakan untuk menerima gambar lain dan menyeret ke posisi ini.