Комментарий: Это всегда было то, что пользователи сети хотят увидеть, не используют ли они JavaScript для достижения эффекта перетаскивания. Сегодня HTML5 сделал подробное представление о вас дальше. Друзья, которые должны знать, могут ссылаться на это.
В веб-разработке нам нужно использовать JavaScript для достижения эффекта перетаскивания. Сегодня давайте реализуем его с помощью HTML5:
Сначала посмотрим на основной HTML -код:
<div>
<p> Перетащите маленькие желтые квадраты в большую красную коробку </p>
</div>
<div Draggable = "true">
</div>
<div>
</div>
Свойство Draggable недавно добавлено HTML5. Он имеет три значения: true, false, Auto. Истина перетаскивается, ложь не допускается. Авто зависит от того, поддерживает ли его браузер пользователя. Для получения дополнительной информации, пожалуйста, обратитесь к официальной документации.
Добавьте немного стиля:
<стиль типа = "text/css">
#уронить
{
Ширина: 300px;
Высота: 200px;
фоновый цвет: #ff0000;
Заполнение: 5px;
Граница: 2PX SOLID #000000;
}
#элемент
{
Ширина: 100px;
высота: 100px;
фоновый цвет: #ffff00;
Заполнение: 5px;
Маржа: 20px;
Граница: 1px пунктир #000000;
}
*[draggable = true] {
-moz-USER-SELECT: Нет;
-KHTML-USER-DRAG: Элемент;
курсор: двигаться;
}
*:-khtml-drag {
фоновый цвет: RGBA (238 238 238, 0,5);
}
</style>
Тогда давайте посмотрим на JavaScript:
Функции ListenEvent (EventTarget, EventType, EventHandler) {
if (EventTarget.AddeventListener) {
EventTarget.AddeventListener (EventType, EventHandler, false);
} else if (eventTarget.attachevent) {
EventType = "on" + eventType;
EventTarget.Attachevent (EventType, EventHandler);
} еще {
EventTarget ["on" + EventType] = EventHandler;
}
}
// Отмена события
Функция Cancelevent (Event) {
if (event.preventdefault) {
Event.preventDefault ();
} еще {
event.returnValue = false;
}
}
// Отменить распространение
функция CancelPropagation (Event) {
if (event.stoppropagation) {
event.stoppropagation ();
} еще {
event.cancelbubble = true;
}
}
window.onload = function () {
var target = document.getElementbyId ("Drop");
ListEnevent (Target, "Dragenter", Cancelevent);
ListenEnvent (Target, "Dragover", Dragover);
ListEneVent (Target, "Drop", function (evt) {
CancelPropagation (EVT);
evt = evt || window.event;
evt.datatransfer.dropeffect = 'copy';
var id = evt.datatransfer.getData ("text");
target.appendchild (document.getElementbyId (id));
});
var item = document.getElementbyId ("item");
item.setattribute ("Draggable", "true");
ListEnevent (Item, "Dragstart", Function (evt) {
evt = evt || window.event;
evt.datatransfer.effectallowed = 'copy';
evt.datatransfer.setData ("text", item.id);
});
};
Функция Dragover (EVT) {
if (evt.preventdefault) evt.preventDefault ();
evt = evt || window.event;
evt.datatransfer.dropeffect = 'copy';
вернуть ложь;
}
Из приведенного выше кода мы смотрим на события перетаскивания, предоставленные с помощью набора HTML5, и смотрим прямо на следующее:
Dragstart
Перетаскивание начинается.
тащить
Во время операции сопротивления.
драгентер
Перетаскивание по цели; используется, чтобы определить, примет ли цель.
Драгвер
Перетаскивание переживает цель; используется для определения обратной связи с пользователем.
уронить
Происходит падение.
драглив
Перетащить листья цели.
дрянь
Операция перетаскивания заканчивается.
Определите связанные события для реализации желаемой функции. Вышеуказанный JS не сложно понять.
Вы можете попробовать сами. В настоящее время он поддерживает лучшее в оперстве, но эффект IE не очень хорош.
Надеюсь, это будет полезно для вашей веб -разработки.