目的地列表变空一次后无法移动项目，我该如何解决？

Posted 2023-05-08

【中文标题】目的地列表变空一次后无法移动项目，我该如何解决？

【英文标题】：Item can't be moved after destination list gone empty once, how can I fix it?

【发布时间】：2015-10-20 01:27:36

【问题描述】：

见 plnkr http://plnkr.co/edit/atoDX2TqZT654dEicqeS?p=preview

如何将项目从列表移动到另一个空列表。目前，一旦目标列表为空，则无法移动项目...如何为我的应用程序解决此问题？

这是我的应用程序标签上的代码：

<div class="row">
    <div class="span4 offset2" style="overflow-y:auto; height:150px;">
        <ul ui-sortable="sortableOptions" ng-model="allDiagnosisFromDb" id="sourceList" ng-class="'minimalList':sourceEmpty()" class="connector">
            <li class="alert alert-danger nomargin" ng-repeat="item in allDiagnosisFromDb">item.Name</li>
        </ul>
    </div>
    <div class="span4" style="overflow-y:auto; height:150px; background-color:lightgray">
        <ul ui-sortable="sortableOptions" id="targetList" ng-model="model" ng-class="'minimalList':sourceEmpty()" class="connector">
            <li class="alert alert-info nomargin" ng-repeat="item in model">item.Name</li>
        </ul>
    </div>
</div>

angularjs 控制器上的代码：

    function loadAllDiagnosis() 
        $scope.allDiagnosisFromDb = [];
        diagnosisPreferanceService.getAllDiagnosis()
            .success(function (data) 
                $scope.allDiagnosisFromDb = data;
            )
            .error(function (xhr) 
                alert('error');
            );
    
    // init
    $scope.model = [
        
            "Id": 23,
            "Name": "First tem."
        
    ];
    $scope.sortableOptions = 
        connectWith: '.connector'
    
    // watch, use 'true' to also receive updates when values
    // change, instead of just the reference
    $scope.$watch("model", function (Name) 
        console.log("Model: " + Name.map(function (e)  return e.Id ).join(','));
    , true);
    // watch, use 'true' to also receive updates when values
    // change, instead of just the reference
    $scope.$watch("allDiagnosisFromDb", function (Name) 
        console.log("allDiagnosisFromDb: " + Name.map(function (e)  return e.Id ).join(','));
    , true);
    $scope.sourceEmpty = function () 
        return $scope.allDiagnosisFromDb.length == 0;
    
    $scope.modelEmpty = function () 
        return $scope.model.length == 0;
    

提前致谢,,,,,,,,,:)

【参考方案1】：

您可以参考下面的链接，完全符合您的要求。

http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

angular.module("demo").controller("SimpleDemoController", function($scope) 

  $scope.models = 
    selected: null,
    lists: "A": [], "B": []
  ;

  // Generate initial model
  for (var i = 1; i <= 3; ++i) 
    $scope.models.lists.A.push(label: "Item A" + i);
    $scope.models.lists.B.push(label: "Item B" + i);
  

  // Model to JSON for demo purpose
  $scope.$watch('models', function(model) 
    $scope.modelAsJson = angular.toJson(model, true);
  , true);
);

【讨论】：

我无法使用这个 Dragale UI，所以我移动了我的问题链接，但仍然有一个问题：当目标列表变空一次时，无法移动项目。请以这种方式指导我，或提供给我一个 plnkr 并提供您提供的marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/….....谢谢