javascript - dragular "remove on spill"无法正常工作

Question

我试图找出如何在 Dragular 服务 ( http://luckylooke.github.io/dragular/#/home ) 中设置选项以获得所需的行为:
假设我们有两个容器，containerLeft 和 containerRight。我们希望能够仅将 copied 项目从 containerLeft 拖放到 containerRight。示例:当我们将项目 left 1 移动到 containerRight 时，它应该在 containerLeft 和 containerRight 中可见。那很好用。好的，我们想要更多功能 - 从 containerRight 中删除项目。在我的 Controller 代码下面:

function TestController(dragularService, $element, $scope) {
    $scope.left = [
        {content: 'left 1'},
        {content: 'left 2'},
        {content: 'left 3'}
    ];

    $scope.right = [
        {content: 'right 1'},
        {content: 'right 2'},
        {content: 'right 3'}
    ];

    var containerLeft = document.querySelector("#containerLeft");
    var containerRight = document.querySelector("#containerRight");

    //remove items from containerRight dosent work properly  
    dragularService([containerRight], {
        removeOnSpill: true
    });

    dragularService([containerLeft, containerRight], {
        containersModel: [$scope.left, $scope.right],
        copy: true,
        //move only from left to right  
        accepts: function (el, target, source, sibling) {
            if (source === containerRight && target === containerLeft) {
                return false;
            } else {
                return true;
            }
        }
    });
}

并查看:

<div class="row" ng-controller="TestController">
    <div class="column small-6">
        <div id="containerLeft" style="">
            <div ng-repeat="item in left">{{item.content}}</div>
        </div>
        <div id="containerRight" style="">
            <div ng-repeat="item in right">{{item.content}}</div>
        </div>
    </div>
    <div class="column small-6">
        <pre>
            left: {{ left | json}}
        </pre>
        <pre>
            right: {{ right | json}}
        </pre>
    </div>
</div>

当我从 containerRight 中删除项目时，它们从 View 中消失，但它们仍在 right 数组中(如果我从左向右拖放某些内容，则会出现删除的早期项目再次)。此外，当我更改 containerRight 中的项目顺序时，它不会影响 right 数组 - items orderd 不会更改。如何设置 options 对象使其正常工作？

Answer 1

是的，设置是正确的，实际上它的错误..我已经提出了这个问题 on project github page ，我会尽快修复它；)

编辑:好的，设置不正确，但也有一个错误，我已经在开发分支中修复它，将在下一个版本中合并。

这是正确的设置:

function TestController(dragularService, $element, $scope) {
    $scope.left = [{
      content: 'left 1'
    }, {
      content: 'left 2'
    }, {
      content: 'left 3'
    }];

    $scope.right = [{
      content: 'right 1'
    }, {
      content: 'right 2'
    }, {
      content: 'right 3'
    }];

    var containerLeft = document.querySelector("#containerLeft");
    var containerRight = document.querySelector("#containerRight");

    //remove items from containerRight dosent work properly  
    dragularService([containerRight], {
      containersModel: [$scope.right],
      removeOnSpill: true,
      nameSpace: 'sameSpace'
    });

    dragularService([containerLeft], {
      containersModel: [$scope.left],
      copy: true,
      //move only from left to right  
      accepts: function(el, target, source, sibling) {
        if (source === containerRight && target === containerLeft) {
          return false;
        } else {
          return true;
        }
      },
      nameSpace: 'sameSpace'
    });
  }

解释:您不能在同一个容器上多次调用 dragularService，如果您想要容器的不同选项，则必须分别在它们上调用 dragularService，然后通过 namespace 连接它们。