Возможно ли как-то заранее узнать сколько элементов в списке на которую пользователь хочет перенести элемент?

Question

[nurzhannogerbek]

Здравствуйте!

Есть два списка. Пользователи могут перемещать элементы между списками. Использую для этого Sortable | JQuery UI.

Вопрос следующий: Пользователь решил переместить элемент из списка A в список B, но при этом пользователь еще не отпустил элемент (то есть еще не сработало событие stop). Возможно ли как-то заранее узнать сколько элементов в списке B на которую пользователь хочет перенести элемент?

Событие over дает информацию о том сколько элементов в текущем списке (список А) из которого переносится элемент:

over: function(event, ui){
    console.log($('div[id='+ui.item.attr("id")+']').closest('.list-group').children().length);
},
beforeStop: function(event, ui){
    console.log($('div[id='+ui.item.attr("id")+']').closest('.list-group').children().length);
}

При использовании события beforeStop показывается количество элементов списка B, куда пользователь переносит элемент. Проблема в том что количество он показывает после того как пользователь отпускает элемент, а мне нужно заранее узнать. Есть ли способ решить данную задачу?

Answer 1

[0xD34F]

Список, в который будет помещён сортируемый элемент, доступен как event.target в обработчике события over.

Comments

[nurzhannogerbek]

Здравствуйте, спасибо за подсказку! :) Я стал близок к решению своей задачи, но не до конца ее решил. Узнать количество элементов в списке мне нужно было для того чтобы скрывать или показывать блок с сообщением. Можете пожалуйста взглянуть на это: jsfiddle.net.

Опишу проблемную ситуацию, которую хочу решить:
Ecли пользователь выбрал элемент из четвертой секции и перетащил в секцию третью, сообщение (empty section в третьей секции) исчезает, что хорошо, но если при этом пользователь еще не отпустил элемент и решил опять возвратить элемент обратно в четвертую секцию, то в третье секции не появляется сообщение. Вот для чего нужен был мне подсчет количества элементов. Есть ли у вас идеи как решить эту проблему?

[nurzhannogerbek]

Я правильно понимаю, что нужно использовать событие out в этой моей задачи? Запутался малость...

[0xD34F]

NogerbekNurzhan, правильно понимаете. Только не учитываете, что при перетаскивании в списке присутствует .ui-sortable-placeholder, который тоже надо отбрасывать при подсчёте элементов списка.

[nurzhannogerbek]

0xD34F, да вы правы, теперь проблемка с placeholder-ом к сожаленью. Как же быть в таком случаи? =(

Если использовать ui.placeholder.hide(); то при обратном возвращении элемента в четвертую секцию, placeholder-а не видно:

out: function(event, ui){
	if($('div:not(.empty-list-group-item, .ui-sortable-placeholder)', this).length===0){
		ui.placeholder.hide();
		return $('div.empty-list-group-item', this).show();
	}
},

Можете помочь еще раз пожалуйста?!

[0xD34F]

NogerbekNurzhan, ну так делайте ui.placeholder.show(); в обработчике over.

[nurzhannogerbek]

Спасибо большое вам! =)