Достаточно распространенная задача — поменять местами элементы в списке. Но как правило эта задача решается жуткими костылями, особенно если это Drag&Drop.
Сейчас я расскажу вам очень простой и гибкий способ сделать это, используя Marionette.js и jQuery UI Sortable.
Читать полностью »
Уверен, всем приходилось работать с интерфейсами drag-and-drop, а многим — разрабабтывать ПО с таковыми. В большинстве случаев факт drop'а объекта-draggable на объект-target устанавливается по факту попадания координат курсора мыши в bounding box объекта-target в обработчке событий типа mouseUp, dragStop и прочих.
Так работают почти все примеры, которые мне встречались. Но некоторое время назад, при реализации модуля интерактивного задания для образовательного ресурса, я столкнулся с тем, что такой подход не очень удобен. Основная причина — объекты-target существенно меньше объектов-draggable. Поэтому целится мышью неудбоно и утомительно. Таща крупный объектами-draggable, пользователь полностью перекрывает объект-target и не видит куда объект падает.
Читать полностью »
Сегодня я запускаю первую версию js-скрипта DND v 1.0. Данный скрипт предоставляет возможность перетаскивать элементы на странице и помещать их в какую-либо область.
Перейти на сайт
В современном web мы все привылки использовать такую прекрасную javascript-библиотеку как jQuery. Но для того, чтобы создавать у себя на странице какие-то динамические эффекты приходиться еще прибегать к jQuery UI, не все слегкостью смогут осилить, разобраться с какими-то премудростями javascript-инициализации. В тем более теперь есть современный HTML5, который, со своим API, может дать легкий подход к разработке. Но как мы все знаем, HTML5 не поддерживается старыми браузерам, однако, это легко исправляется собственными решениями. В итоге я решил написать javascript библиотеку, которая дает возможность использовать HTML5 drag-and-drop у себя на сайте с поддержкой всех браузеров, включая десктопных. При этом технологию можно не изучать, привыкнуть и применять во благо, это все, что от нас требуется.
В небольшом цикле статей будет описано использование WxPython для решения вполне конкретной задачи по разработке пользовательского интерфейса, да еще и то, как сделать это решение универсальным. Туториал этот расчитан на тех, кто уже начал изучать эту библиотеку и хочет увидеть что-то более сложное и целостное, чем простейшие примеры (хотя начнется все с относительно простых вещей).
В этой части мы добавим поддерку Drag&Drop к нашему приложению и научим его таким образом создавать новые ноды.
Часть 1: Учимся рисовать
Часть 2: Обработка событий мыши
Часть 3: Продолжаем добавлять фичи + обработка клавиатуры
Часть 4: Реализуем Drag&Drop
Кому интересно, добро пожаловать под кат…
Читать полностью »
Перетаскиванием объектов на HTML5 никого уже не удивишь, но все же попробую рассказать кое о чем интересном, а именно, как сделать красивое перетаскивание нескольких объектов, используя только HTML5.
На странице есть набор элементов типа А, которые можно по одному или группой перетащить в элемент типа Б. Пользователь должен видеть, перетаскивает он один элемент или несколько. Перетаскивать один элемент просто, достаточно присвоить свойству draggable значение true, наверняка, все это делали. Читать полностью »
Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.
На сегодняшний день функция Drag&Drop в HTML 5 корректно обрабатывается всеми современными настольными браузерами, (частично даже IE 5.5!), однако мобильные такую возможность не поддерживают. Подробнее данные в таблице caniuse.com.Читать полностью »
Мы долго не могли понять почему каждый норовит сделать свой собственный сервис для управления списками дел и почему мы тоже стали жертвой этого стремления, но работа над нашим GTD-приложением, о котором пойдет речь ниже, помогла нам прийти к гипотезе.
Оглянитесь вокруг, много ли вы знаете туду-сервисов? — Тьма. А пользуетесь каким-нибудь? — Вероятно. Но все ли вас в нем устраивает? Скорей всего — нет.
Наверняка вы знаете уйму недостатков в сервисе, с которым работаете ежедневно, но продолжаете пользоваться им потому, что ничего лучше вы все равно еще не нашли. Если вы — разработчик, настает день когда вы понимаете, что настало время «точить пилу» и вы начинаете делать свой таск-менеджер. Постойте, но почему?
Мы убеждены, что потребность хранить и управлять списками дел является одной из основополагающей в жизни современного человека. Она такая же основополагающая, как например потребность писать сообщения другим людям, создавать документы или просматривать медиа. Эта потребность происходит от потребности помнить что либо. Люди любят знать, люди любят принимать решения на основе знаний, но люди не любят держать в голове мелкие несвязные детали. Люди не любят помнить. На сколько эта ниша широка, настолько же она и разнородна. Так же как люди постоянно не могут найти идеальный браузер или почтовый клиент, люди не могут найти идеальный туду-сервис. Отчасти потому что многие продукты несовершенны, отчасти потому, что многие продукты несоответствуют внутреннему восприятию данной проблемы пользователем, т.к. созданы для следования чужой методологии.
Веками для запоминания чего либо использовалась бумага. Она хорошо выполняет свою роль по двум причинам: во-первых, она, как известно, все стерпит, а во вторых, она ничего ненавязывает. Иными словами, бумага сочетает в себе функциональность и простоту. Глубоко проникнувшись этой идеей, мы сделали свой продукт.
Что мы понимаем под этим? Эйнштейн говорил «Сделай настолько просто, насколько это возможно, но не проще.» Мы, следую этому принципу реализовали все фундаментальные инструменты управления делами, но в тоже время мы сделали их максимально обобщенными и ненавязчивыми. Именно поэтому, если вам нужен некоторый инструмент, то вы сможете пользоваться им применительно к любой предметной области, а если он вам не нужен, то вы даже можете не заметить его существования. Т.е. мы не навязываем методологию, мы просто даем набор идеально заточенных инструментов.
Дальше меньше общих слов и больше технологических подробностей. Картинка клибельна.
Читать полностью »
В ходе тестирования своего сервиса собралось достаточное количество фидбека, что олдскульный способ загрузки файлов в приложение не уносит. Люди хотели drag and drop и пытались перетащить картинки прямо с рабочего стола. Приложение у нас занимает весь экран браузера и написано на флеше, так что прямого способа решить задачу не нашлось.
Поразмыслив и погуглив решили реализовать D&D хотя бы для хрома вот так:
Когда пользователь переключается с вкладки с приложением, т.е. она теряет фокус, поверх флешки накладывается div на который навешано событие отлова дропнутых файлов.
Затем через ExternalInterface изображение в виде ByteArray передается во flash, где оно декодируется и отображается.
Читать полностью »
Добрый день! Недавно для одного веб-приложения на Flex'e потребовалось сделать drag'n'drop загрузку фотографий. Flash не позволяет напрямую это реализовать, хотя в приложениях AIR такая фунциональность присутствует. Для решения задачи потребовалось применить HTML5 File API.
Таким образом решение задачи разбивается на несколько этапов. Первый этап — обработка drag'n'drop файлов с помощью File API. Все загруженные файлы добавляются в список из которого потом будут передаваться во Flash.
$(document).ready(function() { var dropZone = $('div#dropZone'); // Проверка поддержки браузером if (typeof(window.FileReader) == 'undefined') { dropZone.text('Не поддерживаетсяЧитать полностью »