Sortable двух столбцов

@Eur93 · Регистрация: 16.09.2013

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

Есть два столбца,в первом элементы div цветов, во втором -фрукты.
Если я фрукт или цветок перемещаю в своем же столбце то опустевшее место обводится красным цветом.
Как сделать так, если я фрукт или цветок перемещу в другой столбец, то там место будет уже не красным, а зеленым цветом?
и второе вопрос, можно ли сделать так, если, допустим, фрукт начать перемещать в столбец со цветами до появления свободного места (да и еще и обведенного цветом), опустить его туда (вообще в моем примере ниже он займет там позицию), но чтобы он тут же удалился, можно было узнать его айди и чтобы тот столбец, куда мы переместили фрукт, будто и не перегруппировывался. Как можно это сделать? И вообще, можно ли так сделать?
Вот пример.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <div id="fruitContainer" class="sortContainer">
        <div id="fruit_1" class="sortable fruit">Яблоко</div>
        <div id="fruit_2" class="sortable fruit">Апельсин</div>
        <div id="fruit_3" class="sortable fruit">Банан</div>
        <div id="fruit_4" class="sortable fruit">Груша</div>
    </div>
    <div id="flowerContainer" class="sortContainer">
        <div id="flower_1" class="sortable flower">Астра</div>
        <div id="flower_2" class="sortable flower">Пион</div>
        <div id="flower_3" class="sortable flower">Лилия</div>
        <div id="flower_4" class="sortable flower">Орхидея</div>        
    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function() {
    $('#fruitContainer').sortable({
        connectWith: '#flowerContainer',
        placeholder: 'emptySpace'
    });
    $('#flowerContainer').sortable({
        connectWith: '#fruitContainer',
        placeholder: 'emptySpace2'
    });
});

CSS
1
2
3
4
5
6
7
      div.sortable { width: 100px; background-color: lightgrey; font-size: large;
            margin: 4px; text-align: center; border: medium solid black; padding: 10px;}
        #fruitContainer {position: absolute; right:50px}
        #flowerContainer {position: absolute; left:50px}
        div.flower {background-color: lightgreen}
.emptySpace {border: medium dotted red; height: 36px; margin: 4px}
.emptySpace2 {border: medium dotted red; height: 36px; margin: 4px}

Добавлено через 19 часов 10 минут
Неужели никто не в силах мне помочь?

@Lazy_Den · 28.02.2014, 15:56

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

Неужели никто не в силах мне помочь?

В силах, только затрат времени не маленький. Стандартных опций для этой задачи нет, а значит надо писать расширение. Ради каких-то плейсхолдеров, которые имеют два разных цвета, у меня лично желания нет тратить время и силы.

@Eur93 · 28.02.2014, 16:21 **[ТС]**

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

@Lazy_Den · 28.02.2014, 16:36

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

Вот только вопрос на счет цвета... какую документацию почитать

По поводу этого я документации не наблюдал. Там всё просто, определяете из какой группы перетаскиваемый элемент, если из чужой, то подменяете класс для плейсхолдера, который будет задавать зеленый цвет border .

@Eur93 · 28.02.2014, 17:05 **[ТС]**

Lazy_Den, точно. Спасибо за идею. Попробую.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Eur93 47 / 47 / 24 Регистрация: 16.09.2013 Сообщений: 349
	28.02.2014, 16:21 [ТС]
	Я и не прошу ни кого ничего писать, просто хочется узнать, возможно ли это, но уже понял что возможно. Сегодня появилась одна мысль на счет реализации перемещения, исчезновения и взятия уйди перемещаемого элемента. Приеду домой - попробую реализовать. Вот только вопрос на счет цвета. Хотя бы намекните с чего начинать, какую документацию почитать, чужие примеры посмотреть, если таковые имеются и прочее. 0

@Eur93 47 / 47 / 24 Регистрация: 16.09.2013 Сообщений: 349
	28.02.2014, 17:05 [ТС]
	Lazy_Den, точно. Спасибо за идею. Попробую. 0

Sortable двух столбцов

Решение