Pull to refresh
  • by relevance
  • by date
  • by rating

Вышел IE10 PP2: WebWorkers, Drag & Drop, File API, CSS3 Positioned Floats, HTML5 Forms и многое другое

Microsoft corporate blog
(хотя на Хабре уже есть короткий пост-заметка про выход IE10 PP2, в этой статье мы хотим дать более корректный и полный обзор того, что нового появилось именно в IE10 PP2).

И так, в соответствии с заявленным сроком выпуска PP-версий для следующих версий IE раз в ~12 недель, мы выпустили очередное обновление. Выглядит IE10 PP2 также как и все предыдущие версии Platform Preview, а самое интересное, как всегда, внутри – обновленный движок Internet Explorer:



Ссылка на загрузку
Читать дальше →
Total votes 63: ↑46 and ↓17 +29
Views 11K
Comments 28

HTML5 Drag and Drop загрузка файлов

HTML *
Sandbox
image
Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).

Читать дальше →
Total votes 81: ↑79 and ↓2 +77
Views 131K
Comments 61

Silverlight cookbook: drag & drop recipe

Silverlight
В этой статье я разберу работу с drag & drop на примере вот такого приложения:

image

Идея в том, чтобы из списка всех пользователей мы могли собственноручно (используя drag & drop) рассортировать пользователей по двум группам. Причем, в белый список нельзя будет добавить пользователей с отрицательной кармой.

Но ближе к делу. Прошу под кат.

Читать дальше →
Total votes 9: ↑3 and ↓6 -3
Views 2K
Comments 1

Drag'n'Drop в QML — это просто! Или 5 шагов до цели

Qt *
Этот пост участвует в конкурсе „Умные телефоны за умные посты“.

Drag'n'Drop является неоспоримо важным элементом взаимодействия пользователя и графического окружения. К сожалению, в QML нет встроенного механизма Drag'n'Drop для View. Поэтому, я написал небольшой пример на основе GridView с 16 изображениями.

Этот пример Drag'n'Drop-а не претендует на совершенство (есть несколько других реализаций, которые визуально возможно более совершенны), а больше преследует цель показать, что QML является очень гибким и простым средством разработки.

Для начала небольшое видео, а под катом 5 простых шагов для получения подобного результата.


5 шагов до цели
Total votes 57: ↑45 and ↓12 +33
Views 15K
Comments 16

Drag'n'drop файлов во Flex, используя HTML5 File API

Website development *
Добрый день! Недавно для одного веб-приложения на Flex'e потребовалось сделать drag'n'drop загрузку фотографий. Flash не позволяет напрямую это реализовать, хотя в приложениях AIR такая фунциональность присутствует. Для решения задачи потребовалось применить HTML5 File API.
Читать дальше →
Total votes 10: ↑7 and ↓3 +4
Views 2.8K
Comments 4

Разрабатываем нижнее меню на HTML5

Website development *HTML *
Translation
image

Поговорим про нижнюю навигацию сайтов. Я уверен, что вы видели её много раз (на различных сайтах). Как правило, это три-четыре колонны меню с различными ссылками. Сегодня я хотел бы показать вам, разработку, которую можно использовать для создания, нижнего меню. Главная цель этой разработки – приготовить статический код HTML (как кэш-файл) для встраивания в нижнюю часть сайта. Если вы заинтересованы в такой теме, то я расскажу вам о создании хорошего, удобного меню. Это руководство разделено на 2 части, сегодня я расскажу вам о первой части: пользовательский интерфейс с возможностью перетаскивания блоков.

Для начала, советую вам загрузить исходные файлы и запустить демо в новой вкладке для лучшего понимания.

ДЕМО
Исходные файлы

Читать дальше →
Total votes 25: ↑11 and ↓14 -3
Views 2.1K
Comments 11

thn.gs — для того, чтобы не помнить

GTD *
Мы долго не могли понять почему каждый норовит сделать свой собственный сервис для управления списками дел и почему мы тоже стали жертвой этого стремления, но работа над нашим GTD-приложением, о котором пойдет речь ниже, помогла нам прийти к гипотезе.
Оглянитесь вокруг, много ли вы знаете туду-сервисов? — Тьма. А пользуетесь каким-нибудь? — Вероятно. Но все ли вас в нем устраивает? Скорей всего — нет.
Наверняка вы знаете уйму недостатков в сервисе, с которым работаете ежедневно, но продолжаете пользоваться им потому, что ничего лучше вы все равно еще не нашли. Если вы — разработчик, настает день когда вы понимаете, что настало время «точить пилу» и вы начинаете делать свой таск-менеджер. Постойте, но почему?

Мы убеждены, что потребность хранить и управлять списками дел является одной из основополагающей в жизни современного человека. Она такая же основополагающая, как например потребность писать сообщения другим людям, создавать документы или просматривать медиа. Эта потребность происходит от потребности помнить что-либо. Люди любят знать, люди любят принимать решения на основе знаний, но люди не любят держать в голове мелкие несвязные детали. Люди не любят помнить. На сколько эта ниша широка, настолько же она и разнородна. Так же как люди постоянно не могут найти идеальный браузер или почтовый клиент, люди не могут найти идеальный туду-сервис. Отчасти потому что многие продукты несовершенны, отчасти потому, что многие продукты несоответствуют внутреннему восприятию данной проблемы пользователем, т.к. созданы для следования чужой методологии.

Веками для запоминания чего либо использовалась бумага. Она хорошо выполняет свою роль по двум причинам: во-первых, она, как известно, все стерпит, а во вторых, она ничего не навязывает. Иными словами, бумага сочетает в себе функциональность и простоту. Глубоко проникнувшись этой идеей, мы сделали свой продукт.
Что мы понимаем под этим? Эйнштейн говорил «Сделай настолько просто, насколько это возможно, но не проще.» Мы, следуя этому принципу реализовали все фундаментальные инструменты управления делами, но в тоже время мы сделали их максимально обобщенными и ненавязчивыми. Именно поэтому, если вам нужен некоторый инструмент, то вы сможете пользоваться им применительно к любой предметной области, а если он вам не нужен, то вы даже можете не заметить его существования. Т.е. мы не навязываем методологию, мы просто даем набор идеально заточенных инструментов.

Дальше меньше общих слов и больше технологических подробностей. Картинка клибельна.
Smthngs
Читать дальше →
Total votes 111: ↑94 and ↓17 +77
Views 6.3K
Comments 149

Использование Drag&Drop в HTML 5

Website development *JavaScript *HTML *
Tutorial


Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.

Поддержка браузерами


На сегодняшний день функция Drag&Drop в HTML 5 корректно обрабатывается всеми современными настольными браузерами, (частично даже IE 5.5!), однако мобильные такую возможность не поддерживают. Подробнее данные в таблице caniuse.com.
Читать дальше →
Total votes 48: ↑38 and ↓10 +28
Views 90K
Comments 11

Сортировка при помощи HTML5 Drag'n'Drop API

VK corporate blog Website development *JavaScript *
Sortable.js — минималистичная библиотека для современных браузеров и touch-устройств, не требующая jQuery.

Как вы уже догадались из названия, библиотека предназначена для сортировки элементов при помощи drag’n’drop. Стандартным решением в таких случаях является jQuery UI/Sortable, а это ни много, ни мало 64 кб + 10 кб. Итого 75 кб gzipped в проекте, где jQuery не используется совсем. Относительно недавно на Хабре уже была статья о том, как реализовать похожий функционал, но опять же на jQuery, да и touch-устройства в предлагаемом решении не поддерживаются.

Читать дальше →
Total votes 59: ↑54 and ↓5 +49
Views 33K
Comments 44

Marionette.js. Drag&Drop сортировка моделей в коллекции

Website development *JavaScript *jQuery *


Достаточно распространенная задача — поменять местами элементы в списке. Но как правило эта задача решается жуткими костылями, особенно если это Drag&Drop.
Сейчас я расскажу вам очень простой и гибкий способ сделать это, используя Marionette.js и jQuery UI Sortable.
Читать дальше →
Total votes 25: ↑21 and ↓4 +17
Views 14K
Comments 7

Sortable v1.0: Новые возможности

Website development *JavaScript *Angular *
Привет хабр! В преддверии нового года хочу поделится своей радостью — выходом Sortable v1.0. Ровно год назад я представил на ваш суд мой маленький инструмент для сортировки списка при помощи drag’n’drop. Всё это время я скрупулезно собирал обратную связь, добавлял новые возможности и правил мелкие баги. Под катом я расскажу о новых возможностях, интеграции с AngularJS, Meteor и других нюансах.
Читать дальше →
Total votes 30: ↑29 and ↓1 +28
Views 27K
Comments 24

Реализация функционала drag&drop в iOS приложении

Productivity Inside corporate blog Development for iOS *Development of mobile applications *Objective C *
Перетаскивание элементов интерфейса пальцем стало настолько естественной составляющей жестового управления, что редкое приложение обходится без него. Тем не менее, должным образом прописать подобный функионал в коде — не всегда тривиальная задача. О некоторых специфических моментах технической реализации drag&drop на Objective C поведает читателям партнерская компания Music Breath.

«Один из проектов, над которым у нас сейчас ведется активная работа — это Song Writer — Lyrics Memo Pad, своеобразная записная книжка для музыкантов, в которую можно в любой момент занести какую-нибудь идею, удачную строку или даже понравившиеся аккорды. Для последних требовалось внедрить в приложение функцию вставки и перетаскивания изображения, которую мы решили выполнить классическим методом — Drag’&’Drop. Сегодня мы расскажем, как реализовывали его, переписывая приложение с Unity на Native, и с какими трудностями столкнулись в процессе.

Читать дальше →
Total votes 3: ↑3 and ↓0 +3
Views 3.2K
Comments 1

Drag & Drop в ваших iOS приложениях

Programming *Development for iOS *Development of mobile applications *Xcode *Swift *
Tutorial


Механизм Drag & Drop, работающий в iOS 11 и iOS 12, — это способ графического асинхронного копирования или перемещения данных как внутри одного приложения, так и между разными приложениями. Хотя этой технологии лет 30, она стала в буквальном смысле «прорывной» технологией на iOS благодаря тому, что при перетаскивании чего-либо в iOS, multitouch позволяет свободно взаимодействовать с остальной частью системы и набирать данные для сброса из разных приложений.
Читать дальше →
Total votes 9: ↑8 and ↓1 +7
Views 7.9K
Comments 0

React Native: делаем draggable & swipeable список

Development for iOS *Development for Android *ReactJS *
Tutorial
Сегодня трудно кого-то удивить возможностью свайпать элементы списка в мобильных приложениях. В одном нашем react-native приложении тоже была такая функциональность, но недавно возникла необходимость расширить её возможностью перетаскивать элементы списка. А поскольку процесс поиска решения стоил мне некоторого количества нервных клеток, я решил запилить небольшую статью, чтобы сэкономить драгоценное время будущим поколениям.


Читать дальше →
Total votes 15: ↑15 and ↓0 +15
Views 7.6K
Comments 2

Метод создания DRAG and DROP эффекта

JavaScript *
Sandbox
Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

  • Метод создания DRAG and DROP эффектов.
  • Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта


Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

Я хочу оговориться, что методов создания данного эффекта несколько и обязательно прочтите о всех. Я воспользуюсь тем, который на данный момент считаю самым удобным.

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

<html>
  <head>
    <style>
      .ddd {
	display:block;
	float:left;
	padding:10px;
	border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id='d1' class='ddd' draggable='true'>Pervii 1</div>
  </body>
</html>

Читать дальше →
Total votes 14: ↑12 and ↓2 +10
Views 18K
Comments 6

Drag-&-Drop компоненты для слепых пользователей? Вы шутите?

Конференции Олега Бунина (Онтико) corporate blog Website development *CSS *JavaScript *Accessibility *
Что объединяет Trello, Gmail, Aviasales и Google Keep? В каждом из них есть Drag-&-Drop-компоненты, которые можно перетаскивать мышкой. Использование этих компонентов делает сайты по-настоящему удобными, потому что в реальной жизни мы часто используем этот паттерн. Передвигать вещи для нас естественно, поэтому и в вебе мы хотим перемещать элементы по экрану с одного места на другое, как стикеры на доске или магнитики на холодильнике. Сортировка todo-списков, организация дашбордов, загрузка файлов — мы просто не можем себе представить все эти события без перетаскивания элементов на странице.



Но есть нюанс. Когда мы разрабатываем такие компоненты, то думаем, что наши пользователи физически видят экран и элементы, могут зацепиться за них мышкой и перетащить.Часто так и есть, но мы забываем о сегменте пользователей с проблемами зрения. Мы создаем компоненты, которыми невозможно пользоваться большой группе людей, которая просто их не видит. Как сделать так, чтобы им тоже были доступны Drag-&-Drop-компоненты?

Сергей Кригер — фронтенд-разработчик в компании SinnerSchrader. Кроме фронтенд-разработки, активно интересуется темой веб-доступности и расскажет о некоторых способах ее повышения. Под катом — рассказ о создании Drag-&-Drop-компонентов для тех, кто не видит экран и пользуется другими устройствами для взаимодействия с браузером.
Total votes 29: ↑28 and ↓1 +27
Views 5.5K
Comments 0

Drag'n'Drop API: пример использования

Website development *JavaScript *Programming *
Tutorial
Доброго времени суток, друзья!

В данном туториале мы рассмотрим встроенный механизм перетаскивания элементов на странице.

Справедливости ради следует отметить, что указанный механизм можно реализовать с помощью событий мыши, как показывает Илья Кантор в своем учебнике, однако мы будем использовать нативные средства, опираясь на спецификацию.

Поддержка технологии:



Превью:



Наша задача состоит в следующем: реализовать список задач, состоящий из трех колонок: все задачи, задачи, находящиеся в процессе выполнения, завершенные задачи. Разумеется, приложение должно предусматривать возможность добавления и удаления задач. Кроме того, должна быть предусмотрена возможность произвольного расположения задач. Это одна из наиболее интересных частей туториала — отслеживание элемента, находящегося под перетаскиваемым, и определение того, где должен располагаться перетаскиваемый элемент, над или под отслеживаемым.

Для стилизации будет использоваться Bootstrap.

Если вам это интересно, прошу следовать за мной.
Читать дальше →
Total votes 6: ↑6 and ↓0 +6
Views 4.7K
Comments 1

Как реализовать drag & drop используя RxJS

JavaScript *Angular *
Translation

Drag & drop - одна из функций, которая может быть очень полезна для пользователей нашего приложения. Кроме того, это отличный пример, показывающий, как RxJS можно использовать для простой реализации функционала перетаскивания. Давайте посмотрим, как мы можем это сделать.

Читать далее
Total votes 2: ↑2 and ↓0 +2
Views 3.5K
Comments 1