如何在angularjs中创建多个元素拖放 [英] How to create multiple elements drag and drop in angularjs

问题描述

任何人都知道或可以指出一个示例，其中多个可拖动元素被拖动到一个容器中?

Anyone knows or can point me to an example in which multiple draggable elements are being dragged into a container ?

我需要使用Angular JS来实现此行为.

I need to achieve this behavior using Angular JS.

到目前为止，我已经尝试过: http://codef0rmer.github.io/angular -dragdrop/#/，但似乎一次只能处理1个元素.

So far I've tried this : http://codef0rmer.github.io/angular-dragdrop/#/ but it only seems to work for 1 element at a time.

谢谢

推荐答案

您提到的该插件不支持多拖放操作.

That plugin you mentioned doesn't support multi drag&drop out of box.

这是使用相同插件支持多拖放的一种有效方法: http://embed.plnkr.co/lyCnU3gNeGRrTk1D9hh0/

Here is a working method to support multi drag&drop using the same plugin: http://embed.plnkr.co/lyCnU3gNeGRrTk1D9hh0/

打开链接后，单击任意区域以使其聚焦并检测键盘按下，然后按ctrl并单击要拖动它们的项目以将其选中.最后，拖动它们.

After you open the link, click on any area to get it to focus and detect your keyboard presses, then hit ctrl and click on the items you want to drag them to make them selected. Finally, drag them.

工作原理:

    <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，则将所选项目保存在全局列表数组中.

Using jquery UI's helper method, I select all selected items and return them to show dragging effect. And then on click, if ctrl is pressed I save the selected items in a gloabl list array.

      <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方法中，我选择使用所选项目的全局列表来设置模型值.

In beforeDrop method I select set the model value using the global list of selected items.

这篇关于如何在angularjs中创建多个元素拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！