Как отключить вертикальное перетаскивание в сортируемом контейнере?

Question

У меня есть 2 столбца, которые я хочу отобразить в сортируемом контейнере. Один из них отображает список всех пользователей (столбец «друзей»), а другой начинается как пустой («выбранный» столбец). Я хочу, чтобы вы могли перетащить пользователей из столбца «Друзья» в столбец «selected». Это работает по назначению прямо сейчас.

Проблема в том, что при прокрутке (особенно на мобильном телефоне) вы можете отключить пользователя в колонке «друзей». Поскольку он начинается в алфавитном порядке, это разрушает заказ, поскольку пользователь ищет своих друзей для сортировки в выбранные. Я бы хотел отключить вертикальное перетаскивание, чтобы вы могли перетаскивать только «друзей» -> «выбрано» и наоборот. Любое вертикальное перетаскивание внутри любого столбца будет проигнорировано. Есть ли способ сделать это, не используя hammer.js, и hammer.js легко применяется к контейнеру сортировки jquery?

Answer 1

http://jsfiddle.net/Jaffreena/rmSgx/45/

<div class="demo"> 
<ul id="sortable"> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
     <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 

</ul> 

<script> $("#sortable").sortable({ axis: "x" }); </script>