Jquery UI排序与angularjs,如何防止水平拖放?轴:y不工作
jquery ui sortable with angularjs, how to prevent horizontal drag and drop? axis:y not working
我使用jquery ui与angularjs排序我正在做这个:
$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看起来像:
<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中的项拖到另一个td中。但这是不可能的。轴:y是给定的,但没有作用。有办法解决这个问题吗?
y轴应该可以工作,这里是工作代码
在这里我使用了
axis:'y'
和相同的配置选项,如你给
添加以下代码解决问题:
beforeStop: function (event, ui) {if ($ (ui.helper) .parent () .attr(类)! = $ (ui.placeholder) .parent () .attr(类)){返回错误;}},
,其中每个ul应该有单独的类,并检查一个条件,看看发送方和接收方的类是否相同,然后允许返回false
相关文章:
- 拖放不会'不能使用EaselJS在chrome中工作
- 文件上载(拖放)无法工作
- 你如何让mootools拖放与触摸一起工作
- 我将如何让OpenLayers功能选择和Javascript拖放一起工作
- CKEDITOR 拖放插件集成在编辑器实例销毁并重新创建后停止工作
- JQuery 可排序、可拖动和可拖放不协同工作
- 让拖放开始工作
- 嵌套可排序无法工作(无拖放)
- Chrome拖放文件/文件夹不工作
- Android拖放事件在4.4.2的ionic中不工作
- 从本地存储拖放HTML5不工作
- HTML5拖放不能正常工作
- 拖放脚本只工作一次,但停止工作[没有jQuery]
- 事件.在拖放事件中,preventDefault和stoppropagation不像预期的那样工作
- 拖放不能正常工作
- 拖放事件不能与onload函数一起工作
- 不能让拖放和html5/javascript一起工作
- 使用JqueryUI拖放不工作
- JQuery拖放不工作在FF3.6后,我实现CSS3灵活的框布局,有什么想法
- Jquery UI排序与angularjs,如何防止水平拖放?轴:y不工作