Перетаскивание данных между двумя ListBox

@kmaffa · Регистрация: 29.10.2012

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

Хочу на страницу поместить 2 элемента ListBox один заполнить исходными данными, а во второй пользователь должен перетащить некоторые строки которые ему "нравятся". Как это реализовать?

@BANO · 18.06.2016, 20:19

kmaffa, можно через jq плагины, это самое простое, что можно предложить
самое сложное, самому делать такую фигню

@kalabuni · 18.06.2016, 20:38

перетаскивание объекта -- это: 1) нажатие левой кнопки мыши на объект; 2) перемещение мыши при удержании левой кнопкой мыши нажатой; 3) отпускание левой кнопки мыши

а стандартный список <select> на первое же действие (нажатие левой кнопки мыши) отреагирует выбором опшена, на который нажали, и никакого "перетаскивания" не получится в принципе
надо делать собственный интерфейс списка из контейнеров <div> (или <p>), похожий на <select>

@ntlinuxnt · 18.06.2016, 22:41

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

а стандартный список <select> на первое же действие (нажатие левой кнопки мыши) отреагирует выбором опшена, на который нажали, и никакого "перетаскивания" не получится в принципе

А как же преэвент дефолт?

@BANO · 18.06.2016, 22:50

kmaffa, а не получится, всё равно, option никак не могут перетаскиваться
потому что они находятся вроде в shadowDOM

@kmaffa · 19.06.2016, 02:57 **[ТС]**

Написано много умных и хороших слов. Пример можно?

@kalabuni · 19.06.2016, 09:00

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

Пример можно?

пример чего вы хотите увидеть?

вам написали - опшены (теги <option>) как таковые перетаскивать нельзя в принципе
по-любому надо "слепить" собственный псевдоселект с псевдоопшенами -- никто этим "за просто так" здесь заниматься не будет, ибо слишком глупа начальная задача.

@Forastero · 19.06.2016, 10:14

На JQ есть вот такой плагин - Sortable. http://jqueryui.com/sortable/#connect-lists
Умеет как раз то, что вам нужно. Но сделан списками, поэтому просто отсабмитить форму не получится.
Придется предварительно собирать очередность айтемов проходом по ним, и либо в скрытый инпут писать этот порядок, а затем распарсивать, либо аяксом отправлять сразу массив.

З.Ы. Можно еще натолкать в форму много скрытых инпутов с name="array[]" value="id_элемента_списка". Это если php.

@BANO · 19.06.2016, 11:16

Forastero, а можно через свою fromdata и аякс сделать

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@kmaffa 338 / 327 / 154 Регистрация: 29.10.2012 Сообщений: 949

	Перетаскивание данных между двумя ListBox 18.06.2016, 20:02. Показов 1978. Ответов 8 Метки нет (Все метки) Хочу на страницу поместить 2 элемента ListBox один заполнить исходными данными, а во второй пользователь должен перетащить некоторые строки которые ему "нравятся". Как это реализовать? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	18.06.2016, 20:19
	kmaffa, можно через jq плагины, это самое простое, что можно предложить самое сложное, самому делать такую фигню 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	18.06.2016, 20:38
	перетаскивание объекта -- это: 1) нажатие левой кнопки мыши на объект; 2) перемещение мыши при удержании левой кнопкой мыши нажатой; 3) отпускание левой кнопки мыши а стандартный список <select> на первое же действие (нажатие левой кнопки мыши) отреагирует выбором опшена, на который нажали, и никакого "перетаскивания" не получится в принципе надо делать собственный интерфейс списка из контейнеров <div> (или <p>), похожий на <select> 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	18.06.2016, 22:50
	kmaffa, а не получится, всё равно, option никак не могут перетаскиваться потому что они находятся вроде в shadowDOM 0

@kmaffa 338 / 327 / 154 Регистрация: 29.10.2012 Сообщений: 949
	19.06.2016, 02:57 [ТС]
	Написано много умных и хороших слов. Пример можно? 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	19.06.2016, 10:14
	На JQ есть вот такой плагин - Sortable. http://jqueryui.com/sortable/#connect-lists Умеет как раз то, что вам нужно. Но сделан списками, поэтому просто отсабмитить форму не получится. Придется предварительно собирать очередность айтемов проходом по ним, и либо в скрытый инпут писать этот порядок, а затем распарсивать, либо аяксом отправлять сразу массив. З.Ы. Можно еще натолкать в форму много скрытых инпутов с name="array[]" value="id_элемента_списка". Это если php. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	19.06.2016, 11:16
	Forastero, а можно через свою fromdata и аякс сделать 0