Сортировка прикрепленных файлов на чистом JS

@AlxBtrd · Регистрация: 14.08.2014

Студворк — интернет-сервис помощи студентам

Есть блок "attach-block" в котором много блоков с классом attached.
Разумеется в этом блоке находятся загруженные пользователем файлы.

Вопроса всего два. Задам по степени важности.
1: Как на чистом JS сортировать блоки прикреплённых файлов (менять их местами)?
2: Как при добавлении материала обработать эти прикрепления?
Назвать их именами вроде attach[] и в value каждого вставить нужные мне значения?

@AlxBtrd · 19.12.2015, 16:21 **[ТС]**

С вторым вопросом уже разобрался. Но совсем не элегантно.
Пришлось вставить скрытое поле <input type="hidden" name="attach[]" value="'.$file_id.'">
И достаточно удобно перебираю, привожу к нужному виду и подставляю необходимые значения функцией.

Но если у кого нибудь будет мысль как убрать скрытое поле, а в идеале ещё и отправить форму целиком через JS, пишите.

Но сейчас главный вопрос - первый вопрос.

@kalabuni · 19.12.2015, 16:30

блок на web-сленге - это плайн-тег (плоский тег) со свойством display: block
например, тег <div></div> можно назвать блоком... или тег <p></p>
а вот тег <input>, к примеру, - это ни разу не блок

но вы собираетесь "в value каждого [блока] вставить нужные вам значения"
а это невозможно по определению - у плайн-тегов нет свойства value

2) любая сортировка осуществляется по какому-либо критерию
например, можно сортировать:
-- строки по алфавиту входящих в них букв
-- числа по их значению
-- даты по их "давности"

3) когда "виртуальная" сортировка завершена (т.е. программно определён новый порядок следования блоков), менять местами блоки - это тривиальная задача удаления одних блоков и вставка на их место других

в общем:
а) определите поточнее -- что есть блок в вашем понимании (что это за чудо такое, имеющее свойство value?)
б) уточните критерий сортировки

тогда вам можно будет помочь

@AlxBtrd · 19.12.2015, 19:46 **[ТС]**

Не по теме:

kalabuni, как же мне не приятны пользователи вроде тебя. Самый типичный пример фигляра манерного.

Ты вообще читаешь текст? Я сказал что я добавил скрытое поле, где ты там слово "блок" то нашёл, гений?
К тому же блоки и их содержимое можно читать по ID. Проблема только в том что я не знаю как и слишком сильно устал сейчас что бы искать самостоятельно инфу на этот счёт.

А что касается тебя, kalabuni, всё просто.
Мне нужно что бы ты показал мне как при помощи мыши перетаскивать блоки с картинками и при этом что бы их позиции в html меняли расположение в аналогичном порядке.

Например на картинке 4 блока с изображениями.

HTML5
1
2
3
4
<div id="1">Гитлер</div>
<div id="2">Аватар</div>
<div id="3">Хз что</div>
<div id="4">Скрин БД</div>

Я зажимаю мышь на первом блоке и тащу в конец.
В итоге 1я картинка становится 4й, 2я-1й,3я-2й,4я-3й.

Жмём F12 и там расположение блоков должно смениться на

HTML5
1
2
3
4
<div id="2">Аватар</div>
<div id="3">Хз что</div>
<div id="4">Скрин БД</div>
<div id="1">Гитлер</div>

Так тебе достаточно понятно? Если нет - выходи из треда прямо сейчас.
Если ты не знаешь как решить подобную, тривиальную задачу - выходи из треда сейчас же.

Добавлено через 2 часа 9 минут
Бамп

@arcmag · 19.12.2015, 20:00

Не по теме:

Сообщение от AlexBitard

Мне нужно что бы ты показал

Сообщение от AlexBitard

Так тебе достаточно понятно?

Сомневаюсь что общаясь в таком приказном тоне вам тут кто то будет помогать...

@AlxBtrd · 19.12.2015, 21:38 **[ТС]**

Не по теме:

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

Да и если никто не станет мне помогать - это право каждого человека.
Решать, желает ли он помочь грубияну какому-то или нет.

Здесь ведь помогают не за деньги и не за добрые слова.
На сколько мне известно, здесь люди просто делятся знаниями. По собственному желанию.
Если в треде появится человек знающий как решить мою проблему и не желающий бескорыстно поделиться со мной этим знанием - это его право.

Но я всё равно буду ждать того, что мне ответят. Если не ответят, пойду в конце концов на другой форум спрошу.

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

Добавлено через 54 секунды
Желательно на чистом JS.

Добавлено через 43 минуты
Если кто нибудь ищет то же что и я, вот что пока что нашёл я.

@Lazy_Den · 19.12.2015, 21:50

Не по теме:

Сообщение от AlexBitard

А что касается тебя, kalabuni

Ну, ща понесётся... :)

@BANO · 19.12.2015, 22:47

Не по теме:

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

@AlxBtrd · 20.12.2015, 00:06 **[ТС]**

Решил временно использовать вот эту гадость.
Если кто найдёт альтернативу на чистом JS, буду благодарен.

@Lazy_Den · 20.12.2015, 01:55

Сообщение от AlexBitard

Решил временно использовать вот эту гадость.

Эта "гадость" относится к jQuery UI (в предыдущем вашем сообщении - первая ссылка)

Сообщение от AlexBitard

альтернативу на чистом JS

Попробуйте этот вариант

@kalabuni · 20.12.2015, 03:01

Не по теме:

Lazy_Den, когда я рекомендовал вас, то отмечал наличие у вас чувства собственного достоинства

походу, вы это чувство начали терять -- отвечать такому быдлу, как топикстартер -- это, извините, себя не уважать

@AlxBtrd · 20.12.2015, 12:46 **[ТС]**

Lazy_Den, Большое спасибо. Это то что мне нужно.
Возникли затруднения с работой в блоке в котором выводятся прикреплённые файлы, буду разбираться, но в целом это именно то что я искал. Ещё раз благодарю.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240

	Сортировка прикрепленных файлов на чистом JS 19.12.2015, 16:01. Показов 1435. Ответов 11 Метки нет (Все метки) Есть блок "attach-block" в котором много блоков с классом attached. Разумеется в этом блоке находятся загруженные пользователем файлы. Вопроса всего два. Задам по степени важности. 1: Как на чистом JS сортировать блоки прикреплённых файлов (менять их местами)? 2: Как при добавлении материала обработать эти прикрепления? Назвать их именами вроде attach[] и в value каждого вставить нужные мне значения? Миниатюры 0

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240
	19.12.2015, 16:21 [ТС]
	С вторым вопросом уже разобрался. Но совсем не элегантно. Пришлось вставить скрытое поле <input type="hidden" name="attach[]" value="'.$file_id.'"> И достаточно удобно перебираю, привожу к нужному виду и подставляю необходимые значения функцией. Но если у кого нибудь будет мысль как убрать скрытое поле, а в идеале ещё и отправить форму целиком через JS, пишите. Но сейчас главный вопрос - первый вопрос. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	19.12.2015, 16:30
	блок на web-сленге - это плайн-тег (плоский тег) со свойством display: block например, тег <div></div> можно назвать блоком... или тег <p></p> а вот тег <input>, к примеру, - это ни разу не блок но вы собираетесь "в value каждого [блока] вставить нужные вам значения" а это невозможно по определению - у плайн-тегов нет свойства value 2) любая сортировка осуществляется по какому-либо критерию например, можно сортировать: -- строки по алфавиту входящих в них букв -- числа по их значению -- даты по их "давности" 3) когда "виртуальная" сортировка завершена (т.е. программно определён новый порядок следования блоков), менять местами блоки - это тривиальная задача удаления одних блоков и вставка на их место других в общем: а) определите поточнее -- что есть блок в вашем понимании (что это за чудо такое, имеющее свойство value?) б) уточните критерий сортировки тогда вам можно будет помочь 0

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240
	19.12.2015, 21:38 [ТС]
	Не по теме: arcmag, Я не вижу смысла общаться иначе с подобными ему, мнящими о себе слишком многое людьми. К вам например я никаких негативных эмоций не испытываю. Да и если никто не станет мне помогать - это право каждого человека. Решать, желает ли он помочь грубияну какому-то или нет. Здесь ведь помогают не за деньги и не за добрые слова. На сколько мне известно, здесь люди просто делятся знаниями. По собственному желанию. Если в треде появится человек знающий как решить мою проблему и не желающий бескорыстно поделиться со мной этим знанием - это его право. Но я всё равно буду ждать того, что мне ответят. Если не ответят, пойду в конце концов на другой форум спрошу. Добавлено через 12 минут Да, кстати, вот пример того что мне нужно. Примерно так же я хотел бы что бы пользователи могли перетаскивать блоки. Добавлено через 54 секунды Желательно на чистом JS. Добавлено через 43 минуты Если кто нибудь ищет то же что и я, вот что пока что нашёл я. 0

@BANO
	19.12.2015, 22:47
	Не по теме: Lazy_Den, сегодня у очень многих людей был хороший день но как говорится, нет худа без добра, тут небольшая инверсия нет добра без худа они напоролись на калабуни... 0

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240
	20.12.2015, 00:06 [ТС]
	Решил временно использовать вот эту гадость. Если кто найдёт альтернативу на чистом JS, буду благодарен. 0

@kalabuni
	20.12.2015, 03:01
	Не по теме: Lazy_Den, когда я рекомендовал вас, то отмечал наличие у вас чувства собственного достоинства походу, вы это чувство начали терять -- отвечать такому быдлу, как топикстартер -- это, извините, себя не уважать 0

@AlxBtrd -13 / 2 / 0 Регистрация: 14.08.2014 Сообщений: 240
	20.12.2015, 12:46 [ТС]
	Lazy_Den, Большое спасибо. Это то что мне нужно. Возникли затруднения с работой в блоке в котором выводятся прикреплённые файлы, буду разбираться, но в целом это именно то что я искал. Ещё раз благодарю. 0

Сортировка прикрепленных файлов на чистом JS

Решение