Перетаскивание - это общая особенность, то есть перетаскивать в другую позицию после объекта захвата.
В HTML5 перетаскивание является стандартной частью, и любой элемент может быть перетаскирован и сброшен.
Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживает перетаскивание.
Примечание: Safari 5.1.2 не поддерживает сопротивление.Пример:
<! Style> <Script> function alowdrop (ev) {ev.preventDefault ();} функция Drag (ev) {ev.Datatransfer.setData (text, evraget.id);} функция Op (ev) {ev. Var Data = ev.Datatransfer.getData (Text); = Drag1 src = img /bg_1.jpg draggable = true ondragstart = drag (event) width = 300px heig ht = 180px /> < /body> < /html>Прежде всего, чтобы элемент был перетаскиван, установите свойство Draggable на True: <img draggable = true>
Затем указывается, что происходит, когда элемент перетаскивается.
В приведенном выше примере свойство OnDragStart вызывает функцию, перетаскивание (событие), которое определяет перетаскиваемые данные.
DataTransfer.setData () Метод установил тип данных и значение данных перетаскивания данных: Функция перетаскивания (ev) {ev.datatransfer.setData (text, ev.target.id);}В этом примере тип данных является текстом, а значение - ID (Drag1), который может перетаскивать элемент.
Событие Ondragover предусматривает, где разместить перетаскиваемые данные.По умолчанию данные/элементы не могут быть размещены в других элементах. Если вам нужно установить допустимое размещение, мы должны предотвратить обработку элементов по умолчанию.
Это должно позвонить в метод события .
Когда данные перетаскивают, происходит событие Drop.
В приведенном выше примере атрибут Ondrop вызывает функцию, Drop (Event):
Функция Drop (ev) {ev.preventDefault ();Код объяснение:
Позвоните в предотвращение defousddefault () , чтобы избежать обработки данных по умолчанию в браузере (поведение события Drop по умолчанию открывается по ссылке)
Получить перетаскиваемые данные через метод datatransfer.getData (текст) . Этот метод вернется к любым данным того же типа в методе setData ().
Данные перетаскивания - это идентификатор элемента перетаскивания (Drag1)
Дополнительный элемент перетаскивания в элемент размещения (целевой элемент)
Перетащите взад -вперед:Если вы хотите перетащить взад и вперед в двух местах, просто измените приведенный выше код.
Измените код в теле:
<body> <div id = div1 ondrop = drop (event) ondragover = alluctdrop (event)> <img id = drag1 src = img/bg_1.jpg draggable = true vent) ширина = 300px высота = 180px/> </div> <div id = div2 ondrop = drop (event) ondragover = allowdrop (event)> </div> </body>
Затем добавьте#div2 в стиль стиля:
<Стиль тип = текст/CSS> div1, #div2 {ширина: 360px;Это можно тащить туда -сюда.
Приведенное выше содержимое этой статьи.