drag and drop and php
Drag and drop and php
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
HTML5 Drag and Drop загрузка файлов
Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).
Разметка
Сразу говорю, статья написана больше для новичков, чем для профессионалов. Поэтому некоторые моменты будут описываться очень подробно.
Для начала, нам необходимо создать HTML файл с таким содержанием:
Вся работа у нас будет происходить с контейнером dropZone. Теперь добавим стили для нашего документа (style.css):
В стилях Вы можете заметить три состояния у элемента dropZone: при наведении, если возникает какая-то ошибка и при успешном выполнении.
Скрипт загрузки
Теперь мы приступим к самому интересному — написанию JavaScript кода. Для начала, нам необходимо создать переменные, в одну из которых мы поместим нашу dropZone, а во второй укажем максимальный размер файла.
Дальше мы должны проверить поддерживает ли браузер Drag and Drop, для этого мы будем использовать FileReader функцию. Если браузер не поддерживает Drag and Drop, то внутри элемента dropZone мы напишем «Не поддерживается браузером!» и добавим класс «error».
Следующее что мы сделаем это будет анимация эффекта перетаскивания файла на dropZone. Отслеживать эти действия мы будет с помощью событий «ondragover» и «ondragleave». Но, так как эти события не могут быть отслежены у jQuery объекта, нам необходимо обращаться не просто к «dropZone», а к «dropZone[0]».
Теперь нам необходимо написать обработчик события «ondrop» — это событие когда перетянутый файл опустили. В некоторых браузерах при перетягивании файлов в окно браузера они автоматически открываются, что бы такого не произошло нам нужно отменить стандартное поведение браузера. Также нам необходимо убрать класс «hover», и добавить класс «drop».
Дальше нам нужно добавить проверку на размер файла, для этого добавим в обработчик «ondrop» следующий строчки кода:
Теперь нам необходимо написать AJAX запрос отсылающий наш файл в обработчик. Для создания AJAX запроса мы будем использовать объект XMLHttpRequest. Добавим для объекта XMLHttpRequest два обработчика событий: один будет показывать прогресс загрузки файла, а второй результат загрузки. В качестве обработчика укажем файл upload.php.
Теперь займемся функциями прогресса загрузки и результата загрузки. В функции «uploadProgress» нет ничего сложного, лишь простейшая математика.
В функции «stateChange» мы должны проверить завершен ли процесс загрузки, и если да, то необходимо проверить не возникла ли какая-либо ошибка. Код успешного запроса «200», если же код отличается от этого, то это означает, что произошла ошибка.
Написание JavaScript части завершено.
Серверная часть
Все что нам осталось, это написать простейший обработчик, который будет сохранять файл в нужном нам месте. В написании обработчика я не буду сильно углубляться, а лишь приведу небольшой пример на PHP.
На этом всё, надеюсь статья была полезной для Вас.
Скачать исходные файлы вы можете здесь.
Перевод и доработка статьи: HTML5 Native Drag And Drop File Upload
Туториал. Список задач с drag & drop
В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться в разных ситуациях — например, в таких:
Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.
HTML Drag and Drop API
В стандарте HTML5 есть API, который позволяет реализовать эффект drag & drop. Он даёт возможность с помощью специальных событий контролировать захват элемента на странице мышью и его перемещение в новое положение. Рассмотрим этот API подробнее.
Далее для реализации перемещения используется ряд событий, которые срабатывают на разных этапах. Полный список есть на MDN, а мы рассмотрим основные.
Приступим к созданию нашего списка задач и рассмотрим на примере, как работать с HTML Drag and Drop API.
Вёрстка и стилизация списка задач
Теперь добавим элементам базовую стилизацию:
Реализация drag & drop
Шаг 1. Разрешим перетаскивание элементов
Уже сейчас перетаскивание доступно для элементов, но пока это выражается только в появлении фантомной копии. Своего положения элементы не меняют, добавим перемещение чуть позже.
Шаг 2. Добавим реакцию на начало и конец перетаскивания
Будем отслеживать события dragstart и dragend на всём списке. В начале перетаскивания будем добавлять класс selected элементу списка, на котором было вызвано событие. После окончания перетаскивания будем удалять этот класс.
Шаг 3. Реализуем логику перетаскивания
Для поиска nextElement мы использовали тернарный оператор. Если вы ещё с ним не знакомы, это можно исправить, прочитав статью.
В целом получившийся на этом этапе код — рабочий. Уже сейчас элементы можно сортировать так, как мы и планировали. Но при этом у варианта есть недостаток — перемещаемый элемент меняет положение в тот момент, когда курсор попадает на другой элемент. Такое поведение недостаточно оптимально и стабильно. С точки зрения пользователя логичнее ориентироваться на центр элемента. То есть мы должны осуществлять вставку только после того, как курсор пересечёт центральную ось, а не сразу после наведения на элемент. Чтобы реализовать это поведение, напишем функцию для получения nextElement другим способом.
Шаг 4. Учтём положение курсора относительно центра
Давайте закрепим на примере. Допустим, мы хотим поменять два элемента местами — начинаем перемещать нижний элемент, наводим курсор на элемент перед ним. Пока мы не приблизились к центру элемента, ничего происходить не должно, потому что пока порядок элементов в DOM изменять не нужно. Но как только курсор пересечёт центральную ось, перемещаемый элемент будет вставлен перед тем элементом, на который мы навели курсор.
Теперь всё работает так, как нужно: мы отслеживаем положение курсора относительно центра, лишние операции в DOM исключили и, главное, элементы сортируются — задача выполнена! Полный код решения — в нашей интерактивной демонстрации.
Полезности
Drag and drop — только часть силы JavaScript
Чтобы познать всю мощь, запишитесь на консультацию и приходите на курс.
Нажатие на кнопку — согласие на обработку персональных данных
Drag and Drop загрузка файлов на сервер
Дата публикации: 2015-12-14
От автора: данная статья написана нашим гостем Osvaldas Valutis. Osvaldas расскажет нам не только про drag and drop загрузку файлов на сервер, но и затронет тему UI и UX, поддержки браузеров, а также покажет, как реализовать данную загрузку с помощью метода прогрессивного улучшения.
Сейчас я работаю над RSS ридером Readerrr. И передо мной стояла задача разнообразить обычный способ добавления файлов через input, я хотел реализовать drag and drop модель. Иногда такой способ намного удобнее, разве не так?
Разметка
В разметке нет ничего особенного. Она обычная, просто тег form, хотя присутствуют также блоки с потенциальными состояниями.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Пока блоки состояний нам не нужны, они прячутся:
input[type=»file»] и label – функциональные элементы формы. В статье настройка input’ов типа file я описывал, как можно их стилизовать. Также в той статье я рассказывал, зачем нужен атрибут [data-multiple-caption]. Input и label служат альтернативой обычному способу выбора файлов (или единственный способ, если drag and drop не поддерживается).
.box__dragndrop отображается, если браузер поддерживает drag and drop.
Обнаружение свойств
Мы не можем 100% полагаться на поддержку в браузере drag and drop. Необходимо обеспечить фолбек, в этом нам поможет метод обнаружения поддерживаемых свойств. В основе метода drag and drop лежат множество различных JavaScript API, необходимо проверить их все.
Сначала само событие drag & drop. Работу по обнаружению поддерживаемых свойств можно с уверенностью доверить библиотеке Modernizr. Ниже тест события:
Как реализовать drag & drop используя RxJS
Эта статья — перевод оригинальной статьи Chris Trześniewski «How to implement drag & drop using RxJS». Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Чтобы следовать всем примерам кода в этой статье, я рекомендую открыть этот стартовый пример. Все примеры будут основаны на нём.
Определение drag & drop
Прежде чем приступить к реализации, давайте рассмотрим, из чего состоит drag & drop. Его можно разделить на 3 этапа:
Вкратце, запуск перетаскивания происходит всякий раз, когда мы нажимаем мышью на элемент. После этого каждый раз, когда мы перемещаем курсор, должно генерироваться событие перетаскивания. Перетаскивание должно продолжаться, но только до тех пор, пока мы не отпустим кнопку мыши (событие «mouse up»).
Базовая реализация
Вы могли заметить, что некоторые из вышеперечисленных слов выделены жирным шрифтом. Это потому, что эти конкретные слова дают нам представление о том, как мы можем реализовать описанное поведение. Для начала мы видим, что для реализации нашей функции потребуются 3 наших события:
Давайте сначала создадим Observables из этих событий. Они будут нашими основными строительными блоками.
Теперь у нас есть базовые события. Теперь давайте создадим из них наше событие перетаскивания.
Как видите, благодаря очень декларативному синтаксису RxJS мы смогли реализовать наша начальное определение drag & drop’а.
Это хорошее начало, но нам нужно немного больше информации в dragMove$ Observable, чтобы мы знали, как далеко мы перетаскиваем элемент. Для этого мы можем использовать значение, отправляемое из dragStart$, и сравнивать его с каждым значением, отправляемым из mouseMove$:
Теперь наш Observable отправляет всю необходимую информацию, чтобы мы могли перемещать перетаскиваемый элемент с помощью мыши. Поскольку наблюдаемые объекты ленивы, нам нужно подписаться на них для выполнения любых действий.
Это небольшое изменение улучшит поведение перетаскивания, чтобы мы могли свободно перемещать курсор по всей странице.
Прежде чем продолжить, давайте очистим код, извлекая созданную нами логику в функцию.
Таким образом, мы можем легко сделать наш код так, чтобы он позволял использовать несколько перетаскиваемых элементов:
Если у вас возникнут проблемы на любом из этапов, вы можете сравнить свое решение с этим примером.
Отправляем кастомные события
Приведенный выше пример показывает, что можно реализовать простое поведение перетаскивания с помощью RxJS. В реальных примерах может быть очень полезно иметь настраиваемое событие для перетаскиваемого элемента, чтобы было легко зарегистрировать настраиваемую функцию в любой части жизненного цикла drag & drop’а.
В предыдущем примере мы определили наблюдаемые dragStart$ и dragMove$. Мы можем использовать их напрямую, чтобы начать генерировать события mydragstart и mydragmove в элементе соответственно. Я добавил свой префикс, чтобы убедиться, что я не сталкиваюсь с каким-либо нативным событием.
Как вы могли видеть в приведенном выше примере, я помещаю логику генерирования события в функцию tap. Я рекомендую этот подход, поскольку он позволяет нам объединить несколько наблюдаемых потоков в один и вызвать подписку только один раз:
И последним шагом нужно отправлять это событие вместе с другими.
На этом реализация завершена. Теперь мы можем использовать эти события как захотим.
Вы можете найти полную реализацию здесь.
Заключение
В этой статье я показал вам, что вы можете легко реализовать базовое поведение drag & drop с помощью RxJS. Это отличный инструмент для этого, поскольку он упрощает управление потоком событий и позволяет очень декларативно реализовать сложное поведение.
Если вы ищете более интересные примеры того, как вы можете использовать события drag & drop с RxJS, я рекомендую посетить этот пример.
Если у вас есть какие-либо вопросы, вы всегда можете написать мне в Твиттере на @ktrz. Всегда рад помочь!