角度拖拽拖拽重复元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了角度拖拽拖拽重复元素相关的知识,希望对你有一定的参考价值。

这里是最能说明问题的傻瓜。

https://plnkr.co/edit/VrT7TmK6tY2u4k2NYJ2U?p=preview

有两个面板左边的面板有一个项目列表,您可以拖放到右侧的井中。用ng重复产生孔。不幸的是,我无法从一口井拖到屏幕右侧的另一口井。不知道为什么。

 <div ng-controller="oneCtrl"><!--one-->



              <div class="span3" style='margin-left:10px;'>

                <div class="thumbnail"
                data-drop="true" 
                ng-model='list1'
                data-jqyoui-options="optionsList1"
                jqyoui-droppable="{multiple:true}">



                    <div class="alert alert-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}"
                      ><!--alert-->

                        {{item.title}}

                    </div><!--alert-->


                </div>
              </div>
              <div class="span3" style='margin-left:150px;'>

                <div class=thumbnail>

                   <div class="well"
                   ng-repeat = "org in orgs"
                    data-drop="true"
                    ng-model="org.list"
                    data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=org.list])'}" 
                    jqyoui-droppable="{multiple:true}">

                    <div class=" alert alert-success btn-draggable" ng-repeat="item in org.list" 
                    ng-show="item.title" 
                    data-drag="{{item.drag}}"
                    data-jqyoui-options="{revert: 'invalid'}"
                    ng-model="org.list"
                    jqyoui-draggable="{index: {{$index}},animate:true}">
                      {{item.title}}
                    </div>

                </div>


                </div>


              </div>





      </div><!--one-->

javascript

var App = angular.module('drag-and-drop',['ngDragDrop']);

App.controller('oneCtrl', function($scope, $timeout) {

  $scope.orgs = [
      {name: 'org1', list: []},
      {name: 'org2', list: []},
      {name: 'org3', list: []},

    ]


  $scope.list1 = [
    { 'title': 'Item 1', 'drag': true },
    { 'title': 'Item 2', 'drag': true },
    { 'title': 'Item 3', 'drag': true },
    { 'title': 'Item 4', 'drag': true },
    { 'title': 'Item 5', 'drag': true },
    { 'title': 'Item 6', 'drag': true },
    { 'title': 'Item 7', 'drag': true },
    { 'title': 'Item 8', 'drag': true }
  ];


});
答案

那是因为你在右侧面板中有转发器的data-jqyoui-options="{accept:'.btn-draggable:not([ng-model=org.list])'}"。对于所有生成的droppable-zones和it controls which draggable elements are accepted by the droppable,此选择器是相同的。如果要删除此选项(或根据您的要求进行修改),您将能够在生成的区域之间拖放项目。

Working plnkr.

以上是关于角度拖拽拖拽重复元素的主要内容,如果未能解决你的问题,请参考以下文章

vue实现拖拽

vue实现拖拽

vue实现拖拽

c# TreeView拖拽问题 十万火急!!

关于js在一个固定的盒子里面拖拽的问题(包含临界值)

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽