Question

我有一个角度应用程序，我在其中使用jQuery-ui进行排序/拖动幻灯片的排序。

JSFidlle：http://jsfiddle.net/sriramr/Q5FWt/447/

模板：

<div ng-controller="SortableCTRL">
<div id="sortable">
    <div ng-repeat="item in sortableArray">
        {{item}} 
        <a href="" class="dntDrg" ng-click="disp(item)" >
            View
        </a>
    </div>
</div>

JS：

function SortableCTRL($scope) {
var sortableEle;

$scope.disp = function(val) {
    console.log(val)
}

$scope.sortableArray = [
    'One', 'Two', 'Three'
];
$scope.dragStart = function(e, ui) {
    ui.item.data('start', ui.item.index());
    ui.item.find('.dntDrg').addClass("hide");
}
$scope.dragEnd = function(e, ui) {
    ui.item.find('.dntDrg').removeClass("hide");
    var start = ui.item.data('start'),
        end = ui.item.index();

    $scope.sortableArray.splice(end, 0, 
        $scope.sortableArray.splice(start, 1)[0]);

    $scope.$apply();
}

sortableEle = $('#sortable').sortable({
    start: $scope.dragStart,
    stop: $scope.dragEnd,
    cancel:".dntDrag"
});

}

视图链接位于可排序元素内部，因为我希望ng-repeat中的每个项目都具有相应的视图链接。单击“查看”链接将显示项目的值。

现在，我想禁用拖动View链接，并使其显示为在项目排序时未拖动它。在小提琴中，我添加了一个类来在拖动时隐藏View链接。是否可以使其显示为静态，但在拖动结束后，视图链接与其项目正确关联？

ng-repeat：禁用拖动/移动jquery sortable

0 个答案: