任何人都知道或可以指出一个将多个可拖动元素拖入容器的示例?
我需要使用Angular JS来实现这种行为。
到目前为止,我已尝试过这样做:http://codef0rmer.github.io/angular-dragdrop/#/但它似乎一次只适用于1个元素。
Thansk
答案 0 :(得分:1)
你提到的那个插件不支持多重拖放。\ / p>
这是一种使用相同插件支持多拖放的工作方法: http://embed.plnkr.co/lyCnU3gNeGRrTk1D9hh0/
打开链接后,单击任何区域以使其聚焦并检测键盘按下,然后按ctrl并单击要拖动它们的项目以使其选中。最后,拖动它们。
工作原理:
<div class="container form-inline" style="text-align: center;">
<div class="btn btn-droppable" ng-repeat="item in list5" data-drop="true" ng-model='list5' data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=list5])'}" jqyoui-droppable="{index: {{$index}}}">
<div class="btn btn-info btn-draggable"
ng-class="{'selected':(multiSelectedDataColumnsIndecies.indexOf($index) > -1)}"
data-html="true"
data-drag="true"
data-jqyoui-options="draggableOptionsList"
ng-model="list5"
jqyoui-draggable="{index: {{$index}},animate:false,placeholder: 'keep'}"
ng-click="dataItemClick($index,$event,item)">
{{item.title}}
</div>
</div>
</div>
$scope.draggableOptionsList = {
appendTo: 'body',
snap: true,
cursor: 'move',
revert: 'invalid',
helper: function() {
console.log('Im in helper');
var selected = $('.selected');
if (selected.length === 0) {
selected = $(this);
}
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone());
return container;
}
};
使用jquery UI的帮助方法,我选择所有选定的项目并返回它们以显示拖动效果。然后点击,如果按下ctrl,我将选中的项目保存在一个gloabl列表数组中。
<div class="row-fluid">
<ul class="thumbnails">
<li class="span3" style='margin:10px;width: 100%; '>
<div class="thumbnail"
data-drop="true"
ng-model='list1'
data-jqyoui-options
jqyoui-droppable="{onDrop:'dropCallback(list1,$index)',beforeDrop: 'beforeDrop(list1)', multiple:true}">
<div class="caption">
<div class="btn btn-info btn-draggable" ng-repeat="item in list1" ng-show="item.title" data-drag="{{item.drag}}" data-jqyoui-options="{revert: 'invalid'}" ng-model="list1" jqyoui-draggable="{index: {{$index}},animate:true}">{{item.title}}</div>
</div>
</div>
</li>
</ul>
</div>
$scope.beforeDrop = function(event, ui, dataModel) {
//In case of multi drop
for (var i = 0; i < $scope.multiSelectedDataColumnsForDrop.length; i++) {
var isExisting = false;
for (var j = 0; j < dataModel.length; j++) {
if (dataModel[j].title == $scope.multiSelectedDataColumnsForDrop[i].title) {
isExisting = true;
break;
}
}
if (!isExisting) {
dataModel.push(angular.copy($scope.multiSelectedDataColumnsForDrop[i]));
}
}
var deferred = $q.defer();
deferred.resolve();
return deferred.promise;
};
在beforeDrop方法中,我选择使用所选项目的全局列表设置模型值。
答案 1 :(得分:0)
如果您正在谈论嵌套的dropzones,请查看其中一个:
http://marceljuenemann.github.io/angular-drag-and-drop-lists/(HTML5) https://github.com/JimLiu/angular-ui-tree(纯JavaScript)
如果您只想将两个元素放入容器中,那么您提到的库也支持它,请参阅此示例: