Как стать автором
Обновить

Комментарии 44

Запрос в гугле выдает ссылку на html5sortable в 85 строк.
В Вашей конечно решено больше проблем, но сейчас jquery — стандарт дефакто, внезависимости от того хорошо это или плохо.
Демка либы — просто шикарная
Не поверите, я её смотрел и даже начал прикручивать, но потом, что-то дернуло меня посмотреть код… Это очень плохая либа.

P.S. Я не против jQuery, просто у меня его не было, нужно было что-то просто и компактное.
Интересно, а Вы приняли б пул реквест с оберткой для jquery? ;)
Приму, даже сам готов сделать :] Главное сделать её компактной, думаю от лишних 100-200 байт никому плохо не станет.
Я не спец по WEB-у, но в примере — все плавает, при перемещении курсора мыши над объектами… Думаю не самая аккуратная реализация получится для конечного пользователя.
Это специально было сделано, just for fun :]
Так на Android-ном планшете ничего не плавает (перемещения статичны, относительно первоначальной разметки), и сортировка отрабатывает не каждый раз.

p.s. для минусующих — пишите комменты, какого х… ра, собственно.
Спасибо за тест на андройде, обязательно посмотрю. Что за бразуер использовали?

P.S. Андройдов много, а меня больше интересовала iOS.
P.S.S. Верстка «плавает» только на mousemove и dragover события, следовательно на планшетах всё будет статично.
Nexus-2013, Android 4.3, сборка ParanoidAndroid 3.94, браузер — стандартный. Первая сортировка проходит нормально, остальные — нет.
На хроме, при тех-же условиях, даже первая сортировка не проходит

p.s. уже проходит
Chrome Beta 32.0.1700.58 Android Nexus 7 4.4.2, плавает только когда нажимаешь в пустое место (что логично), перемещение текста летает, перемещение картинок подтормаживает чутка
Можете попробовать сейчас, должно стать чуть-чуть лучше.
А есть ли поддержка сортировки вложенных списков?
Это микро решение, максимум, что есть, это группы. Можете написать issue с ТЗ, а я подумаю, как это сделать не превращая либу в очередного монстра.
У вас недоработка в библиотеке. Прикладываю скриншот. На нем я попытался поменять местами второй и третий элемент:

image

Ошибка в том, что перетаскиваемый объект должен меняться местами с тем элементом, который сейчас находится под курсором мыши. Мне кажется, там, где вы писали
чтобы она учитывала, в какой половине находится курсор мыши, «верхней» или «нижней»
, вы свернули куда-то не туда. В результате получилось, что для выполнения сортировки нужно хитрить — заходить мышкой с нужной стороны и проходить более половины элемента, иначе будет как на скриншоте. Такую сортировку нельзя назвать удобной и интуитивной.
Это float-список, тут учет идет по ширине, а не высоте, так что вы не дотянули до «конца» ;] Нужно сдвинуть курсор немного правей (50%+)
Пользователю неважно, float это список или еще что-то. Перефразирую сказанное мной выше: я перетащил элемент, а он не перетащился, сортировка не работает.
Вы перетащили элемент на «левую» половину и объект вставлен «перед», чтобы вставить «после», достаточно дотянуть буквально 5-10px.
Все верно, и это есть проблема вашей библиотеки.
Я подумал над вашими словами и чуть-чуть изменил логику для float-элементов: http://rubaxa.github.io/Sortable/

P.S. Лучше сбросить кеш.
Теперь намного лучше получилось!

Вот разве что маленький недостаток (я перетаскиваю кровать наверх):

image

Ну да, технически я опять «недотянул», несмотря на то, что кровать находится намного выше Антона, но все равно таких ситуаций не должно возникать.

Кстати, насчет идеала — если бы была анимация, было бы вообще здорово.
И так. Второй час играюсь с этой логикой и пришел к выводу, что она справедлива только для объектов, которые по ширине или высоте меньше или равны чем перетаскиваемый. В противном случае, только если смещение больше 50%.
Я один, после просмотра демки, вместо «Ухты, клевая сортировка перетаскиванием» подумал «Ухты, клевый паралакс»? :)
А заставить border-radius работать во время драга реально, или это ограничение технологии? Не считаю, что это принципиально, просто любопытно.

pbrd.co/JmVLd6
Увы, это на совести браузера. Полностью исправить проблему можно только отказавшись от drag'n'drop api.
То что верно работает только в лесе есть явно проблема. =\
В опере(старой) и ИЕ белый квадрат. В сафари и хроме полный квадрат фотки. И только лиса отработала как надо.
Да, я это знаю, вот такой он, HTML5, но для моей задачи, это не критично. Статья про HTML5 Drag'n'Вrop API и как с ним работать, когда-нибудь браузеры исправят эти проблемы.
Сурфейс, ИЕ11, при окончании сортировки наглухо вешается таба
Плохо, но сюрфейса нет. Вероятно падает из-за CustomEvent, IE как обычно в своем репертуаре. Сегодня завтра попробую их убрать, не сможете потом проверить?
Лежит у тебя на столе. Все что нужно у нас есть.
Спасибо :] Сегодня тогда фикс и сделаю.
Отлично работает в Chrome на ПК, правда хотелось бы увидеть более эффектную анимацию перетаскивания :)
А вот на wp8 смартфоне не работает :( При тапе по списку выделяется не конкретная строка/объект, а весь список.
В FF 26 (вероятно, от версии не зависит) со включенным плагином QuickDrag наблюдается такая фича: элементы сортируются, но при отпускании элемента QuickDrag отрабатывает свои действия: если картинка, то открывает на новой вкладке, если текст, то ищет в гугле.

Понятно, что ваша либа не виновата, но хотя бы теоретически — нет ли какого-то способа предотвратить срабатывание QuickDrag в этих случаях?
Нужно исследовать, но скорей всего придется писать авторам этого плагина, чтобы они обращали внимание на evt.isDefaultPrevented().
Ну ёшкин кот, как всё просто, что ж я сам не догадался… Спасибо огромное!
Но всё равно, проблема в либе, она не учитывает, что действие по умолчанию отменено.
Эмм… под либой вы подразумеваете QuickDrag или Sortable.js?
QuickDrag — её.
Ну в любом случае — описанная проблема решена. А QuickDrag уже года два как не развивается…
НЛО прилетело и опубликовало эту надпись здесь
Смотрите `onMove`, через него можно реализовать подобный механизм.
НЛО прилетело и опубликовало эту надпись здесь
Хорошее решение, но если добавить вложенный список, то валится ошибка (хотя сам функционал остается рабочим). Проблему можно решить если добавить
evt.stopPropagation() 
в функцию
_onDragOver
А нигде и не написано, что есть поддержка вложенных списков. Скажу больше, её никогда и не будет, увы.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий