Question

我正在开发一个AngularJS项目，其功能是用户可以跨数组移动项目。初始化时只显示一个数组;当用户拖动项目并将鼠标悬停在所需的数组名称上时，将显示该特定数组，用户可以将项目放在那里。

下面是一个用于说明该功能的codepen项目： http://codepen.io/anon/pen/PPWpQV

我已经有点工作，但有两种情况我遇到了问题：

当有三个数组时，我可以在它们之间移动项目（甚至是空数组）。但是，无法移动数组中的最后一项。此外，占位符有时仅在相当长的时间后出现。
当只有两个数组且一个为空时，我根本无法移动任何项目。（尝试注释掉其中一个非空数组。）

如果所有数组都在初始化时显示而不是在鼠标悬停时显示（即删除ng-show属性），则可排序功能可以无缝工作。

我花了一些时间试图解决这个问题，但没有设法解决这个问题。任何建议都非常感谢！

JS

var myApp = angular.module("app", ['ui.sortable']);

myApp.controller("MainController", function ($scope, $timeout) {

    $scope.item_lists = [
        ['1', '2', '3', '4', '5'],
        ['A', 'B', 'C', 'D', 'E'], // Comment out this line to test scenario 2
        []
    ]

    $scope.sortable = {
        appendTo: '.container-fluid',
        helper: 'clone',
        connectWith: '.items',
        dropOnEmpty: true,
        cursor: 'move',
        placeholder: 'placeholder'
    }; 

    $scope.setVisibleArray = function (value) {
        $scope.visible_array_id = value;
    };

    $scope.visible_array_id = 0;

});

HTML

<div ng-app="app" class="container-fluid" ng-controller="MainController">
  <div class="folder">
    <div ng-repeat="item_list in item_lists" ng-mouseover="setVisibleArray($index)" ng-class="{'highlighted': visible_array_id == $index}">Array {{$index}}</div>
  </div>
  <div class="items" ng-repeat="item_list in item_lists" ui-sortable="sortable" ng-model="item_list" ng-show="visible_array_id == $index"> <!-- Sortable works seamlessly if ng-show attribute is removed. -->
    <div ng-repeat="item in item_list">Item {{item}}</div>
  </div>
</div>

AngularJS ui-sortable - 无法移动物品

0 个答案: