角度拖拽拖拽重复元素
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-->
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,此选择器是相同的。如果要删除此选项(或根据您的要求进行修改),您将能够在生成的区域之间拖放项目。
以上是关于角度拖拽拖拽重复元素的主要内容,如果未能解决你的问题,请参考以下文章