jQuery UI排序與angularjs，如何防止水平拖放？ 軸：y不起作用

Question

我正在使用與angularjs進行排序的jquery ui我正在這樣做：

$scope.sortableOptions = {
            start: function(e, ui) {
                $(this).attr('data-previndex', ui.item.index());
            },
            update: function(e, ui) {
                $(this).removeAttr('data-previndex');
            },
            receive: function(e, ui) {
            },
            stop: function(event, ui) {
                var val = ui.item.attr("val");
                $("#list"+val+" li").each(function(i, el){
                    $scope.updateTop(val,el.id,i);
                });
                $("#list"+val+"sub li").each(function(i, el){
                    $scope.updateBottom(val,el.id);
                });
            },
            connectWith: ".group",
            axis: 'y',
            placeholder: 'placeholder',
            helper: "clone",
            dropOnEmpty: true,
        };

如您所見，我給定了axis：y，因此它應該只允許垂直拖放，但是水平拖放也可以。 我不需要水平拖放。 還有其他解決方案嗎？ HTML看起來像：

    <div class="row">
    <div class="col-md-12 sortable">
        <table cellpadding="0" cellspacing="0">
            <td ng-repeat="amount_info in amount_data" valign="top" width="300">
                    <!--sort list-->
                    <ul ui-sortable="sortableOptions" id="list{{amount_info.amount}}" class="group so_list{{amount_info.amount}}" ng-model="amount_info.sortList" >
                        <li ng-mouseup="mouseUp(sortItem.ProductId,amount_info.amount)" amount="{{amount_info.amount}}" ng-repeat="sortItem in amount_info.sortList track by $index" ProductId="{{sortItem.ProductId}}" id="prod_{{sortItem.ProductId}}">
                        <div id="tc_prod">
                                {{sortItem.Product}} [{{sortItem.ProductId}}] 
                            </div>
                        </li>
                    </ul>
                    <div class="listdivide"></div>
                    <ul ui-sortable="sortableOptions" id="list{{amount_info.amount}}sub" class="group so_list{{amount_info.amount}}"  ng-model="amount_info.nonSortList" >
                        <li  ng-repeat="nonsortItem in amount_info.nonSortList track by $index" productId="{{nonsortItem.ProductId}}" id="prod_{{nonsortItem.ProductId}}" amount="{{amount_info.amount}}">
                            {{nonsortItem.Product}} [{{nonsortItem.ProductId}}]
                        </li>
                    </ul>
                </div>
            </td>
        </table>
    </div>
</div>

每個表td在ul中都有一個列表。 來自一個td的項目不應拖到另一個td。 但是不可能。 給出Axis：y，但無效。 有什么辦法解決這個問題？

Answer 1

y軸應該工作，這是工作碼筆

在這個我已經使用

axis:'y'

以及與您提供的相同的配置選項

Answer 2

通過添加以下代碼解決了該問題。

beforeStop：function（event，ui）{if（$（ui.helper）.parent（）。attr（'class'）！= $（ui.placeholder）.parent（）。attr（'class'））{返回假; }，

其中每個ul應該具有單獨的類，並檢查條件以查看發送者和接收者的類是否相同，然后允許以其他方式返回false。