Комментарий: Call Preventdefault (), чтобы избежать обработки данных по умолчанию браузера (поведение событий Drop по умолчанию открывается в форме ссылки), а перетаскиваемые данные получают с помощью метода dataTransfer.getData (текст). Заинтересованные друзья могут ссылаться на это.
Оригинальный эффект
Эффект после перетаскивания
Код выглядит следующим образом
[код]
<! Doctype html>
<html>
<голова>
<стиль типа = "text/css">
#div1, #div2
{float: слева; Ширина: 100px; Высота: 35px; Маржа: 10px; прокладка: 10px; граница: 1px solid #aaaaaa;}
</style>
<script type = "text/javascript">
функция AllowDrop (EV)
{
ev.preventdefault ();
}
функция перетаскивания (EV)
{
ev.datatransfer.setdata ("text", ev.target.id);
}
Функция Drop (EV)
{
ev.preventdefault ();
var data = ev.datatransfer.getdata ("text");
ev.target.appendchild (document.getelementbyid (data));
}
</script>
</head>
<тело>
<img src = "/i/w3school_logo_black.gif" draggable = "true" ondragstart = "drag (event)"/>
<div ondrop = "drop (event)" ondragover = "AllowDrop (Event)">
</div>
<div ondrop = "drop (event)" ondragover = "AllowDrop (Event)"> </div>
</body>
</html>
[/код]
Это может показаться немного сложным, но мы можем изучить различные части события перетаскивания отдельно.
Установите элементы для перетаскивания
Во -первых, чтобы сделать элемент перетаскиваемым, установите свойство Draggable на True:
<img draggable = "true" />
Что перетаскивать - ondragstart и setdata ()
Затем укажите, что происходит, когда элемент перетаскивается.
В приведенном выше примере свойство OnDragStart вызывает функцию, перетаскивание (событие), которое указывает перетаскиваемые данные.
Метод dataTransfer.setData () устанавливает тип данных и значение перетаскиваемых данных:
функция перетаскивания (EV)
{
ev.datatransfer.setdata ("text", ev.target.id);
}
В этом примере тип данных является текстом, а значение - идентификатор перетаскиваемого элемента (Drag1).
Куда положить
Событие Ondragover указывает, где разместить перетаскиваемые данные.
По умолчанию данные/элементы не могут быть размещены в других элементах. Если вам нужно установить разрешение размещения, мы должны заблокировать обработку элементов по умолчанию.
Это делается путем вызова события.
Event.preventDefault ()
Сделать размещение - ondrop
Событие падения происходит при размещении данных.
В приведенном выше примере свойство Ondrop вызывает функцию, Drop (Event):
Функция Drop (EV)
{
ev.preventdefault ();
var data = ev.datatransfer.getdata ("text");
ev.target.appendchild (document.getelementbyid (data));
}
Код объяснение:
Call Preventdefault () Чтобы избежать обработки данных по умолчанию браузера (поведение событий Drop по умолчанию открывается в форме ссылки) для получения перетаскиваемых данных с помощью метода DataTransfer.getData (текст). Этот метод возвращает любой набор данных в тот же тип в методе setData (). Данные перетаскивания - это идентификатор перетаскиваемого элемента (Drag1) добавляет перетащенный элемент к элементу размещения (целевой элемент)