标签: angular-dragdrop

<div
                      cdkDropList
                      #girlList="cdkDropList"
                      [cdkDropListData]="girls"
                      [cdkDropListConnectedTo]="[convaList]"
                      class="example-list"
                      (cdkDropListDropped)="drop($event)"><div class="card color-challenging mb-2" *ngFor="let girls_data of girls" cdkDrag>
                      <div class="card-body p-2 justify-content-between align-items-center d-flex">
                        <span class="reading-grade font-weight-bold">{{girls_data.id}}</span>
                        <div class="student-grade flex flex-grow-1">
                          <p class="justify-content-between align-items-center d-flex">
                            <span class="student-name">{{girls_data.firstName}}{{girls_data.lastName}}</span>
                            <span>{{girls_data.gender}}</span>
                          </p>
                          <p class="justify-content-between align-items-center d-flex">
                            <span>{{girls_data.currentAcademicYear}}</span>
                            <span><i class="fa fa-ban" aria-hidden="true"></i> <i class="fa fa-paperclip" aria-hidden="true"></i></span>
                          </p>
                        </div>
                        <span class="behavior-grade text-right font-weight-bold">{{girls_data.inGrade}}</span>
                      </div>
                    </div>

当使用 [cdkDropListData] 时，控制台上出现错误，无法绑定到“cdkDropListData”，因为它不是“div”的已知属性。

我是角度新手，所以请避免新手行为

我已经在 module.ts 中导入了 CdkDragDrop

这是组件文件。

import {Component, NgModule} from '@angular/core';
import {StudentModel} from '../model/studentRepository.model';
import {Student} from '../model/student.model';
import …

提前致谢。这是问题：

我正在使用Angular Material CDK Drag Drop（版本：@angular/ckd：7.3.7）

文档说“当元素移动时，项目会自动重新排列。 ”

我的问题是：如何防止项目在元素移动时自动重新排列？

这是我不想要的动画 gif。这是我制作的棋盘，您可以看到“随着元素（棋子）移动，项目（棋子）正在自动重新排列”

这是我想要的动画 gif。我想要的是物品（棋子）不会随着元素（棋子）移动而重新排列。

这是一个带有代码的stackblitz

更新 11.07.2020

Github 上的问题https://github.com/angular/components/issues/19401

原帖

在列表中向下或向上拖动项目时，是否可以调整滚动速度？在 macOS 上的 Firefox 中，它的行为符合预期，我拖动项目越往下滚动越快。在 Chrome 和 Safari 中，似乎只有一种速度。

对我来说，Chrome 中的行为是最重要的，因为我计划在 ionic 项目中使用拖放。

有人知道滚动是 CDK 中的自定义 javascript 实现还是某些本机浏览器功能？

闪电战

我有2个数组。我正在实现一个 Angular 拖放，我想使用 FormArray 来保存元素被放入的数组。

问题是我无法将 formcontrol 应用于 div，因为它给出了错误

错误：没有名称为“语言”的表单控件的值访问器

这是html

      <div>

        <div class="example-container">
          <h2>Selected Languages</h2>
          <div
          cdkDropList
          #todoList="cdkDropList"
          [cdkDropListData]="anotherarray"
          [cdkDropListConnectedTo]="[doneList]"
          class="example-list"
          (cdkDropListDropped)="drop($event)"
           formControlName="language">
          <div class="list-group-item list-group-item-action " *ngFor="let item of anotherarray" cdkDrag>
            {{item}}
          </div>
        </div>
      </div>

      <div class="example-container">
        <h2>Available Languages</h2>

        <div
        cdkDropList
        #doneList="cdkDropList"
        [cdkDropListData]="testingarray"
        [cdkDropListConnectedTo]="[todoList]"
        class="example-list"
        (cdkDropListDropped)="drop($event)">
        <div class="list-group-item list-group-item-action " *ngFor="let item of testingarray" cdkDrag>{{item}}</div>
      </div>
      </div>

      </div>

      <button type="submit" class="btn btn-primary my-2" translate>saveButtonLabel
        <fa-icon *ngIf="saveIcon" [icon]="saveIcon" [spin]="saveIcon.iconName === 'spinner'"></fa-icon>
      </button>
    </form>

我正在尝试在我的 Angular 6 应用程序中添加拖放功能，我正在尝试使用有角度的材料 这是我想要使​​用的概述链接。我遵循了入门说明，但我无法使用“@angular/cdk/drag-drop”我尝试安装波纹管包

npm install --save @angular/material @angular/cdk @angular/animations

和

npm install --save @angular/cdk

但波纹管文件夹仍然丢失

从'@angular/cdk/drag-drop'导入{DragDropModule}；

即使按照步骤操作，我的项目中也无法使用拖放。谁能帮我解决这个问题

我有一个项目列表，我可以从其中拖动项目并将其放入另一个列表中。我使用Angular 中的copyArrayItem()方法来不从前一个数组中删除该项目。

我开始拖动，该项目位于前一个数组中：该项目的占位符显示出来。

开始拖动，占位符出现

我要离开之前的数组：占位符/拖动的项目消失（我希望占位符/拖动的项目保留）-> 起始数组有负 1 个项目。

占位符消失，这是我不想要的

我在目标数组上：占位符出现在目标数组中。

我正在删除该项目：项目现在出现在开始和目标数组中。

对于我当前的项目，我正在尝试将拖动元素从一个位置拖动到一个 div 内的另一个位置。为此，我使用了 Angular Material 7 CDK 拖放功能。它在整个页面上拖动，但只想在特定的 div 内拖动。但是我在 Angular Material 7 CDK 拖放中没有看到任何控制边界的选项。

谁能告诉我如何控制材料中的边界或建议其他一些可用于 angular 7 的插件。？

谢谢。

我的来源是在plunker(点击)

如果我尝试在输入框中输入关键字"sa",然后将三星Galaxy S移动到下面的列表(目标),则移动的项目不是那个,而是"iPhone".

我尝试解决这个问题3个小时.这是非常简单的代码.但我是角度js的新手,尤其是角度js-dragdrop.但我知道如何解决这个问题.但我不知道如何解决这个问题.prbolem是我用于快速搜索的过滤器,如下所示.

ng-repeat='item in users | filter:q'

因此,在ng-repeat中没有过滤器,它运行良好.但是,如果我在ng-repeat中使用它,问题是我无法移动我拖动的项目.目标列表中的已删除项目是另一个.原因,我猜,过滤器在过滤后没有改变变化的索引.我怎么解决这个问题？我期待着收到你的帮助.