首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jquery ui可排序的angularjs,如何防止水平拖放?轴:Y不工作

jquery ui可排序的angularjs,如何防止水平拖放?轴:Y不工作
EN

Stack Overflow用户
提问于 2016-09-27 14:26:05
回答 2查看 789关注 0票数 1

我正在使用带有angularjs的jquery ui sortable,我这样做:

代码语言:javascript
运行
复制
$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,
        };

正如你所看到的,我已经给出了轴:y,所以它应该只允许垂直拖放,但水平拖放也是有效的。我不需要水平拖放。有没有其他选择来解决这个问题?Html看起来像这样:

代码语言:javascript
运行
复制
    <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中。但这是不可能的。轴:给出了Y,但没有效果。有什么办法可以解决这个问题吗?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-09-29 18:51:22

通过添加以下代码解决了此问题。

beforeStop: function (事件,ui) { if($(ui.helper).parent().attr('class') != $(ui.placeholder).parent().attr('class')){ return false;} },

其中每个ul应该有单独的类,并检查一个条件以查看发送方和接收方的类是否相同,然后允许否则返回false。

票数 0
EN

Stack Overflow用户

发布于 2016-09-27 14:48:45

轴y应该可以工作,这里是工作的codepen

在这方面,我使用了

代码语言:javascript
运行
复制
axis:'y'

和您给出的相同的配置选项

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/39717445

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档