如何在angularjs中拖放创建多个元素

时间:2014-03-14 19:10:42

标签: angularjs

任何人都知道或可以指出一个将多个可拖动元素拖入容器的示例?

我需要使用Angular JS来实现这种行为。

到目前为止,我已尝试过这样做:http://codef0rmer.github.io/angular-dragdrop/#/但它似乎一次只适用于1个元素。

Thansk

2 个答案:

答案 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)

如果您只想将两个元素放入容器中,那么您提到的库也支持它,请参阅此示例:

http://codef0rmer.github.io/angular-dragdrop/#/list