Javascript jquery ui可与angularjs排序,如何防止水平拖放?轴:y不工作
我正在使用jquery ui sortable和angularjs 我正在这样做:Javascript jquery ui可与angularjs排序,如何防止水平拖放?轴:y不工作,javascript,jquery,angularjs,jquery-ui,Javascript,Jquery,Angularjs,Jquery Ui,我正在使用jquery ui sortable和angularjs 我正在这样做: $scope.sortableOptions = { start: function(e, ui) { $(this).attr('data-previndex', ui.item.index()); }, update: function(e, ui) { $(this).re
$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>
-
-
{{nonsortItem.Product}}[{{nonsortItem.ProductId}]
每个表都有一个ul列表。不应将一个td中的项目拖到另一个td。但这不是可能的。轴:y是给定的,但不起作用。有什么办法解决这个问题吗?y轴应该可以工作,这是工作原理 在这方面,我使用了
axis:'y'
而且,与u提供的配置选项相同的配置选项通过添加以下代码解决了此问题 beforeStop:函数(事件、用户界面){ if($(ui.helper.parent().attr('class')!=$(ui.placeholder.parent().attr('class')){ 返回false; } },
每个ul应具有单独的类别,并检查条件以查看发送方和接收方的类别是否相同,然后允许否则返回false。我有多个表列。在每一个我都有ul li列表。实际上,我只需要在每个td内进行拖放。但它可以从一个td拖到另一个td。在我的例子中,y轴不起作用。我想你必须更改表的结构,因为ui sortable对元素起作用,并且在表中元素是按行而不是按列呈现的。我的td包含列表。我有很多这样的td元素。我已经用html更新了我的问题。你能看看html并告诉我它是否是jQueryUISortable支持的吗?哦,那么你可以使用sortable选项中的“items”属性,基本创建为每个列表提供一个不同的可排序选项对象,该对象具有除items属性之外的所有公共属性,items属性将为每个列表提供一个唯一的选择器,该选择器将解决您的问题,我猜谢谢,我将对此进行研究。