我试图弄清楚如何在Dragular Service(http://luckylooke.github.io/dragular/#/home)中设置选项以获得所需的行为:
假设我们有两个容器containerLeft
和containerRight
。
我们希望只能将复制的项目从containerLeft
拖放到containerRight
。例如:当我们将项目left 1
移到containerRight
时,它应该在containerLeft
和containerRight
中可见。很好好的,我们想使用更多功能-从containerRight
中删除项目。在我的控制器代码下面:
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
中删除项目时,它们从视图中消失了,但仍处于right
数组中(如果我从左向右拖放某些内容,则再次显示已删除的较早项目)。另外,当我更改containerRight
中的项目顺序时,它对right
数组没有影响-所订购的项目不变。如何设置options
对象以使其正常工作? 最佳答案
是的,设置是正确的,实际上是它的错误。.我提出了问题on project github page,我会尽快修复;)
编辑:好的,设置不正确,但是还有一个错误,我已经在dev分支中修复了它,将在下一个版本中合并。
这是正确的设置:
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连接它们。