Перетаскивание - это общая особенность, то есть перетаскивать в другую позицию после объекта захвата.
В HTML5 перетаскивание является стандартной частью, и любой элемент может быть перетаскирован и сброшен.
Сначала нажмите на небольшой пример: выполнить JavaScript, когда пользователь начинает перетаскивать элементы
<p Draggable = true ondragstart = myfunction (Event)>? </p>
Совет: ссылки и картинки перетаскиваются по умолчанию и не нуждаются в свойстве перетаскивания.
Определение и использованиеСледующие события будут вызваны во время процесса перетаскивания:
Internet Explorer 9+, Firefox, Opera, Chrome и Safari поддерживает перетаскивание.
Примечание: Safari 5.1.2 не поддерживает перетаскивание;
ПримерСначала разместите код, а затем объясните один за другим:
<! Граница: 1px solid #aaaaaaa;} </style> </head> <body> <p> перетаскивание изображения img_w3slogo.gif в прямоугольный короб (Даже t)> </div> <br> <img id = drag1 src = images/img_w3slogo. Ev.preventdefalt ();} функция Drag (ev) {ev.datatransfer.setdata (text, ev.target.id);} функция Drop (ev) {ev.preventdefault (); ;Эффект страницы перед перетаскиванием:
Давайте проанализируем значение следующего кода ниже.
Установите элемент, который можно перетаскивать и сброситьПрежде всего, чтобы элемент был перетаскиван, установите свойство Draggable на True:
<Img draggable = true>Что ДАРЕТЬСЯ СОЗДАТЬ
Затем указывается, что происходит, когда элемент перетаскивается.
В приведенном выше примере свойство OnDragStart вызывает функцию, перетаскивание (событие), которое определяет перетаскиваемые данные.
DataTransfer.setData () Метод установил тип данных и значение данных перетаскивания данных:
Функция перетаскивания (ev) {ev.datatransfer.setData (text, ev.target.id);}В этом примере тип данных является текстом, а значение - ID (Drag1), который может перетаскивать элемент.
Куда поместить егоСобытие Ondragover предусматривает, где разместить перетаскиваемые данные.
По умолчанию данные/элементы не могут быть размещены в других элементах. Если вам нужно установить допустимое размещение, мы должны предотвратить обработку элементов по умолчанию.
Это должно вызвать метод события.
Event.preventDefault ()Постановление
Когда данные перетаскивают, происходит событие Drop.
В приведенном выше примере атрибут Ondrop вызывает функцию, Drop (Event):
Функция Drop (ev) {ev.preventDefault ();Код объяснение:
Результаты реализации, как показано на рисунке:
Объект DataTransferВо время операции перетаскивания мы можем использовать объект DataTransfer для передачи данных для выполнения других операций на данных, когда операция перетаскивания закончится.
Атрибут объекта: Функция dragstart_handler (ev) {console.log (dragstart); = P1 Draggable = true ondragstart = dragstart_handler (event);> Этот элемент нарисуется Определите данные сопротивления Функция dragstart_handler (ev) {// Добавить данные перетаскивания ev.datatransfer.setdata (text/valy, ev.target.id); ; Определите изображение сопротивления Функция Dragstart_handler (ev) {// Создать изображение, а затем используйте его для изображения DRAG. (); Определите эффект сопротивления Функция dragstart_handler (ev) {// Установите эффект перетаскивания для копирования ev.datatransfer.dropeffect = copy;} Определите зону падения Function dragover_handler (ev) {ev.preventDefault (); Элемент до доминирования цели = ev.datatransfer.getData (Text); div> </body> Проблема перетаскивания браузера FirefoxНо зайдите сюда и найдите проблему в браузере Firefox:
Перетаскивание HTML5 использует PreflectDefault для предотвращения появления страницы POP -UP, но он не работает под Firefox?
Решение:
document.dy.ondrop = function (event) {event.preventDefault ();Или для приведенного выше примера, также можно добавить к методу Ondrop:
Функция Drop (ev) {ev.preventdefault ();Выше всего содержимое этой статьи.