как работает приложение dragy
Как реализовать drag&drop на чистом JavaScript
В этом туториале мы рассмотрим, как реализовать эффект drag&drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса.
Drag & drop может понадобиться в разных ситуациях — например, в таких:
Простое визуальное изменение положения элемента.
Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
Изменение контекста элемента. Пример — перенос задачи в таск-трекере из одного списка в другой.
Перемещение локальных файлов в окно браузера.
Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.
HTML Drag and Drop API
В стандарте HTML5 есть API, который позволяет реализовать эффект drag & drop. Он даёт возможность с помощью специальных событий контролировать захват элемента на странице мышью и его перемещение в новое положение. Рассмотрим этот API подробнее.
Далее для реализации перемещения используется ряд событий, которые срабатывают на разных этапах. Полный список есть на MDN, а мы рассмотрим основные.
drag — срабатывает каждые несколько сотен миллисекунд, пока элемент перетаскивается.
dragstart — срабатывает в момент начала перетаскивания элемента.
dragend — срабатывает в момент, когда перетаскивание элемента завершено.
dragover — срабатывает каждые несколько сотен миллисекунд, пока перетаскиваемый элемент находится над зоной, в которую может быть сброшен.
drop — срабатывает в тот момент, когда элемент будет брошен, если он может быть перемещён в текущую зону.
Приступим к созданию нашего списка задач и рассмотрим на примере, как работать с HTML Drag and Drop API.
Вёрстка и стилизация списка задач
Теперь добавим элементам базовую стилизацию:
Реализация drag & drop
Шаг 1. Разрешим перетаскивание элементов
Уже сейчас перетаскивание доступно для элементов, но пока это выражается только в появлении фантомной копии. Своего положения элементы не меняют, добавим перемещение чуть позже.
Шаг 2. Добавим реакцию на начало и конец перетаскивания
Будем отслеживать события dragstart и dragend на всём списке. В начале перетаскивания будем добавлять класс selected элементу списка, на котором было вызвано событие. После окончания перетаскивания будем удалять этот класс.
Шаг 3. Реализуем логику перетаскивания
Делаем всю область списка доступной для сброса.
Проверяем, что событие dragover сработало не на выбранном элементе, потому что иначе перемещать элемент нет смысла — он уже на нужном месте.
Также проверяем, что dragover сработало именно на одном из элементов списка. Это важно, потому что курсор может оказаться и на пустом пространстве между элементами, а оно нас не интересует.
Находим элемент, перед которым нужно осуществить вставку. Сделаем это, сравнив положение выбранного элемента и текущего, на который наведён курсор.
Вставляем выбранный элемент на новое место.
Для поиска nextElement мы использовали тернарный оператор. Если вы ещё с ним не знакомы, это можно исправить, прочитав статью.
В целом получившийся на этом этапе код — рабочий. Уже сейчас элементы можно сортировать так, как мы и планировали. Но при этом у варианта есть недостаток — перемещаемый элемент меняет положение в тот момент, когда курсор попадает на другой элемент. Такое поведение недостаточно оптимально и стабильно. С точки зрения пользователя логичнее ориентироваться на центр элемента. То есть мы должны осуществлять вставку только после того, как курсор пересечёт центральную ось, а не сразу после наведения на элемент. Чтобы реализовать это поведение, напишем функцию для получения nextElement другим способом.
Шаг 4. Учтём положение курсора относительно центра
Давайте закрепим на примере. Допустим, мы хотим поменять два элемента местами — начинаем перемещать нижний элемент, наводим курсор на элемент перед ним. Пока мы не приблизились к центру элемента, ничего происходить не должно, потому что пока порядок элементов в DOM изменять не нужно. Но как только курсор пересечёт центральную ось, перемещаемый элемент будет вставлен перед тем элементом, на который мы навели курсор.
Теперь всё работает так, как нужно: мы отслеживаем положение курсора относительно центра, лишние операции в DOM исключили и, главное, элементы сортируются — задача выполнена! Полный код решения — в нашей интерактивной демонстрации.
Полезности
HTML Drag and Drop API на MDN. Вся основная информация об API.
Native HTML5 Drag and Drop. Статья с описанием основных возможностей API и примером использования. Есть перевод на русский.
How to make a Drag-and-Drop file uploader with vanilla JavaScript. Статья о том, как реализовать загрузку файлов с помощью drag & drop.
Drag & drop с событиями мыши. Пример, как реализовать эффект без использования HTML Drag and Drop API. Это может понадобиться, например, из-за плохой поддержки API мобильными браузерами.
10 Best Drag And Drop JavaScript Libraries. Список JavaScript-библиотек, с помощью которых можно усовершенствовать встроенный drag & drop.
dragy 车速家 4+
Harbin Qirui Technology Company With Limited Liability.
Для iPhone
Снимки экрана (iPhone)
Описание
Dragy是一款专业测试汽车直线加速的App，使用蓝牙4.0进行数据交互。使用该App可以实现实时测速等功能，比如加速测试测试0-100km/h， 100-200km/h, 0-200km/h， 距离测试 0-400米， 减速测试 100-0， 自定义测试等。
Что нового
Оценки и отзывы
Не работает
Не работает, висит в статусе Connecting to drugy
Thank you for your feedback. Please kindly note that Dragy device is required for performance testing, available on www.goDragy.com and Amazon.com. If you have the device already and the problem persists, would you please offer more details to help us address this issue, and send to support@godragy.com? We appreciate your support!
For Russian fan
Russian Language
Add the Russian language to the application
Конфиденциальность приложения
Разработчик Harbin Qirui Technology Company With Limited Liability. указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.
Связанные с пользователем данные
Может вестись сбор следующих данных, которые связаны с личностью пользователя:
Данные об использовании
Не связанные с пользователем данные
Может вестись сбор следующих данных, которые не связаны с личностью пользователя:
Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, задействованных функций или других факторов. Подробнее
Информация
английский, упрощенный китайский
Поддерживается
Семейный доступ
С помощью семейного доступа приложением смогут пользоваться до шести участников «Семьи».
dragy Connect 4+
Harbin Qirui Technology Company With Limited Liability.
Designed for iPhone
iPhone Screenshots
Description
Ready to test your 1/4 mile performance with dragy? Dragy is a GPS based performance meter. Track your 0-60mph, 60-130mph, 0-130mph, 1/4 mile, 1/2 mile performance. Share the performance on the leaderboard. Share videos with real-time speedometer and performance report.
***Note: Dragy DEVICE IS REQUIRED for performance testing. Dragy is available on www.goDragy.com
What’s New
Ratings and Reviews
Great piece of kit!
I love my dragy! The times it records are pretty spot on and I usually have no issue finding satellite connection. The only thing I would change is being able to pause the recorder until you get to where you’re ready to start, that way you don’t have to hit reset and add a new data log which clutters up the interface while you trying to look at your new time. Other than that I have had no issues with it and I would definitely buy it again. No regrets what so ever.
Thanks for your feedback and we are glad to hear you enjoy the dragy experience! We wish to minimize manual operation during drive for the safty reason and sorry for the inconvenience. To easily delete your unwanted records, you can set the time filter for each test mode. Choose History in Me tab, tap the Filter in the up right corner, here you can set the time filter. For example you can set 30 seconds for 0-60mph, then all the records will be split into Under 30s and Other in 0-60mph history. You can delete all the records in Other, and change the filter back to your normal settings to filter out the good timings. Please feel free to contact support@godragy.com if you have any questions or suggestions. We appreciate your support!
App needs some work, trying before buying unit
Heard some good things about this unit and app and wanted to see for myself. I got the app 2 minutes before typing this just to see how the interface is and I cannot even get it to open. It keeps telling me I have no internet connection. Obviously some sort of bug/error. If I cannot even open up the app how can I use this product so what’s the use of buying the unit?
Edit: The dev should put some sort of an offline mode because if this thing has issues with internet then it isn’t really usable. Why would it need internet anyways aside from logging into your account. I’m sure you could use all the features without internet connection if such a mode or setting was available.
Edit 2: Just deleted and reinstalled and it loaded but when I got into the main interface the no internet connection error kept popping up.
App Crashes and is Extremely Slow
App Privacy
Data Linked to You
The following data may be collected and linked to your identity:
Data Not Linked to You
The following data may be collected but it is not linked to your identity:
Privacy practices may vary, for example, based on the features you use or your age. Learn More
Information
English, Simplified Chinese
Supports
Family Sharing
With Family Sharing set up, up to six family members can use this app.
Dragy
Измерительный прибор Dragy Performance meter предназначен для отслеживания динамики ускорения, мощности и тормозного пути автомобиля, а также замеры время круга и контрольных точек.
Прибор Dragy для измерения разгонной динамики Вашего автомобиля использует высокоскоростной GPS и ГЛОНАСС, для подключения к спутникам используется технология A-GPS, что позволяет использовать оборудование через 2 секунды после его включения. Точность измерения составляет до 0,01 секунды.
Все измерения динамики автомобиля автоматически отображаются на вашем смартфоне или планшете через приложение Dragy, которое доступно как на платформе Android, так и на iPhone IOS. Через приложение Вы легко сможете опубликовать результаты своих заездов в социальных сетях и на форумах, а так же поделиться результатами со своими друзьями, записать видео замера.
Прибор Dragy имеет возможность снимать лог высоты при старте замера и на финишной линии, при отклонение высоты более 1% заезд будет считаться не действительным.
Все данные с заездов сохраняются в метрическом, а также в SAE формате, что позволяет сравнивать 100-200 км/ч и все метрические эквиваленты. Для вашего удобства Вы сами можете выбирать разные отрезки скорости и дистанцию для измерения ускорения или прошедшего времени, времени для торможения, например, такого как 100-0, и многое другое.
Система может запускаться одновременно с JB4 Mobile и другими приложениями bluetooth.
Основные возможности Драги:
Комплект поставки: 
Dragy Flap 4+
Dream-Up
Для iPad
Снимки экрана
Описание
••• A really nice little game to play everywhere! •••
Tap on your screen to Fly Up and Try to go as far as possible while avoiding obstacles!
Don’t forget to eat the small FireBalls, it’s really good for the health of Dragy.
Select the difficulty level before starting the game.
You also select the «Immortal» mode!
• A really nice game
• A very friendly hobby
• Play with your little Dragon
• Select the difficulty level
• «Immortal» mode!
Что нового
We’ve improved the rendering quality on some devices.
To give you a better gaming experience, we’re constantly improving features and tracking bugs.
Thank you so much for your comments and have fun!
Конфиденциальность приложения
Разработчик Dream-Up указал, что в соответствии с политикой конфиденциальности приложения данные могут обрабатываться так, как описано ниже. Подробные сведения доступны в политике конфиденциальности разработчика.
Данные, используемые для отслеживания информации
Следующие данные могут использоваться для отслеживания информации о пользователе в приложениях и на сайтах, принадлежащих другим компаниям:
Не связанные с пользователем данные
Может вестись сбор следующих данных, которые не связаны с личностью пользователя:
Конфиденциальные данные могут использоваться по-разному в зависимости от вашего возраста, задействованных функций или других факторов. Подробнее