如何使用JQuery sortable在嵌套元素之间进行选择

Question

我在一组列中显示了一系列元素。我希望用户能够单击其中一个“字母”类项目和如果他们将鼠标垂直移动到他们选择的小方块上并垂直移动并与其他小方块一起排序柱。如果用户单击一个正方形并水平移动鼠标，我希望他们点击的列移动并与其他列一起排序。

的jsfiddle：

https://jsfiddle.net/ygoh9r78/

码

HTML

<div id="letter-containers">
            <ul class="letter-column">
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
            </ul>
            <ul class="letter-column">
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
            </ul>
            <ul class="letter-column">
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
            </ul>
            <ul class="letter-column">
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
            </ul>
            <ul class="letter-column">
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
                <li class="letter"></li>
            </ul>
        </div>

JQuery的

$(".letter-column").sortable({
    axis: 'y'
});

$("#letter-containers").sortable({
    axis: 'x'
});