На веб -странице вам необходимо изменить положение нескольких элементов, что может быть достигнуто путем перетаскивания элемента. Глобальный атрибут перетаскивается в HTML5, который контролирует, можно ли перетаскивать элемент, установив true/false.
Давайте возьмем картинку в качестве примера и используем jQuery для его реализации: на странице есть несколько изображений, перетащите одну картину в середину двух других изображений, а затем положение этого изображения может быть вставлено между двумя изображениями.
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<style>
.img-div img {
Ширина: 200px;
Высота: 200px;
Плавание: осталось;
}
.img-div {
Плавание: осталось;
}
.drop-left, .drop-right {
Ширина: 50px;
Высота: 200px;
Плавание: осталось;
}
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<Скрипт>
$ (document) .ready (function () {
// родительский девта
var $ srcimgdiv = null;
// начать перетаскивать
$ (". Img-div img"). Bind ("dragstart", function () {
$ srcimgdiv = $ (this) .parent ();
});
// события, выпущенные при перетаскивании.
$ (". Drop-left, .drop-right"). Bind ("Dragover", function (event) {
// разрешение перетаскивания должно быть установлено через event.preventDefault ()
Event.preventDefault ();
});
// прекратить событие перетаскивания и выпуска мыши
$ (". Drop-left"). Bind ("drop", function (event) {
Event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). до ($ srcimgdiv);
}
});
$ (". Drop-right"). Bind ("Drop", Function (Event) {
Event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). после ($ srcimgdiv);
}
});
});
</script>
</head>
<тело>
<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 - это событие, которое начинает перетаскивать элемент, Dragover - это событие, которое перетаскивает элемент, а Drop - это событие, которое заканчивает перетаскивание и выпускает мышь.
Draggable = "true" означает, что элемент IMG может быть перетаскивается, но на самом деле IMG по умолчанию может быть удалена, так что это свойство также может быть удалено. Если вы хотите перетащить элемент Div, вам нужно установить Draggable = "true".
Элементы DIV с классовым отбрасыванием и правом сдача расположены на левой и правой сторонах картинки и используются для получения других изображений и перетаскивания в эту позицию.