Как решить конфликт между jquery ui sortable и jquery custom content scroller?

Question

[Михаил Тресер]

Я столкнулся с проблемой использования jquery custom content scroller в паре с jquery ui sortable. У меня есть список с перетаскиваемыми элементами, которые можно двигать или удалять, после чего они выстраиваются заново из оставшихся элементов. Моя задача была повесить на этот список кастомный скролл, так как список может содержать большое количество элементов.

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

Также я заметил, что при попытке перетащить один из элементов списка меняется структура ДОМ-дерева относящего к скроллу. div.mCustomScrollBox становится соседним элементом для всех элементов списка, вместо того чтобы быть их родителем.

До

<ul class="subjectsMenu mCustomScrollbar _mCS_1 mCS-dir-rtl">
	<div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0">
		<div id="mCSB_1_container" class="mCSB_container ui-sortable" style="position:relative; top:0; left:0;" dir="rtl">
			<li class="ui-sortable-handle">...</li>
			<li class="ui-sortable-handle">...</li>
			<li class="ui-sortable-handle">...</li>
			<li class="ui-sortable-handle">...</li>
			<li class="ui-sortable-handle">...</li>
			<li class="ui-sortable-handle">...</li>
			<li class="ui-sortable-handle">...</li>
		</div>
	</div>
</ul>

После

<ul class="subjectsMenu mCustomScrollbar _mCS_1 mCS-dir-rtl mCS_no_scrollbar"><div id="mCSB_1" class="mCustomScrollBox mCS-light mCSB_vertical mCSB_inside" tabindex="0">
	<div id="mCSB_1_container" class="mCSB_container ui-sortable mCS_y_hidden mCS_no_scrollbar_y" style="position:relative; top:0; left:0;" dir="rtl"></div>
		<div id="mCSB_1_scrollbar_vertical" class="mCSB_scrollTools mCSB_1_scrollbar mCS-light mCSB_scrollTools_vertical" style="display: none;">
			<div class="mCSB_draggerContainer">
				<div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 40px; display: block; height: 335px; max-height: 740px; top: 0px;" oncontextmenu="return false;">
					<div class="mCSB_dragger_bar" style="line-height: 40px;"></div>
				</div>
				<div class="mCSB_draggerRail"></div>
			</div>
		</div>
	</div>
	<li class="ui-sortable-handle">...</li>
	<li class="ui-sortable-handle">...</li>
	<li class="ui-sortable-handle">...</li>
	<li class="ui-sortable-handle">...</li>
	<li class="ui-sortable-handle">...</li>
</ul>

Answer 1

[Назар Мокринский]

Выбросьте уже этот jQuery UI, он устарел безнадежно.
Есть альтернатива - маленькая, легкая, не зависит от фреймворков, по API практически полностью совместима с jQuery UI: https://github.com/voidberg/html5sortable

Comments

[fedot1325]

Ага, только есть маааааленький косячок. Попробуйте зажать элемент и поскроллить в html5 dnd.

[Назар Мокринский]

fedot1325: Скрол не работает, но если тащить за грань окна браузера - то страница прокручивается. По-моему не критично совсем.

[fedot1325]

Назар Мокринский: не решусь утверждать, но вроде бы в каком-то из браузеров у меня скролл при касании края не работал. Да и для кого-то отсутствие скролла будет критичным. + Насколько я помню, нет возможности кастомизировать перетягиваемый объект, т.е. он тупо становится полу-прозрачным, и всё что можно регулировать - степень полу-прозрачности (бтв опасити тоже не во всех браузерах работала).