关键词：
【中文标题】如何在图像上实现拖放，改变其位置【英文标题】：How to implement drag & Drop on an image, changing its position 【发布时间】：2020-06-01 19:58:09 【问题描述】：我开发了一个滑块，向我展示了几张图片。
在顶部（大图像和滑块所在的位置）我将初始图像作为主图像。
在底部我有辅助图像（见下图）。
有没有办法将图像拖动到包含滑块的 div 以更改顺序？基本上我打算将小框中的图像与大框中的第一张图像交换。
我也可以横向更改小图像的顺序吗？
谢谢。
DEMO - Stackblitz
代码
<div class="col-md-6" style="overflow-y: auto;" (cdkDropListDropped)="drop($event)">
<div class="drop" [style.border-width.px]="imagens.length > 0 ? 0: 3">
<div class="abc">
<ngb-carousel style="outline: none;" id="carousel" #carousel *ngIf="imagens" (slide)="change($event)">
<ng-template *ngFor="let imgIdx of imagens; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.Imagem" style="border-radius: 8px;" class="img-responsive Images">
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let imgIdx of imagens | slice:1" >
<img class="img-responsive" [src]="imgIdx.Imagem" style="width: 100%; height: 100%">
</div>
</div>
</div>
我尝试使用这个，在 html cdkdrag 中添加，但是没有，它不起作用。
drop(event: CdkDragDrop<string[]>)
moveItemInArray(this.imagens, event.previousIndex, event.currentIndex);
dropBig(event: CdkDragDrop<string[]>)
moveItemInArray(this.imagens, event.previousIndex, 0);
【问题讨论】：
【参考方案1】：cdk 拖放 在两个 cdkDropList 之间拖动很有用。通常它用于交换两个数组的值（cdkDropList 的 cdkDropListData）。所以你需要先定义 cdkDropList 和可拖动元素 (cdkDrag)
所以，首先将 angular.json 更改为使用 cdk 8.2.3，-您使用的是 Angular 8，而不是混合版本-
"@angular/cdk": "^8.2.3",
然后创建两个数组，imagens 和 imagens2(*) 并将您的 .html 更改为 - 查看 cdkDropList 和 cdkDrag- 的位置-
<div class="col-md-6" style="overflow-y: auto;">
<div class="drop" [style.border-width.px]="imagens.length > 0 ? 0: 3">
<div class="abc" cdkDropList #dropList="cdkDropList" cdkDropListOrientation="horizontal"
[cdkDropListData]="imagens"
[cdkDropListConnectedTo]="[dragList]"
(cdkDropListDropped)="drop($event)">
<ngb-carousel data-interval="false" style="outline: none;" id="carousel" #carousel *ngIf="imagens"
(slide)="change($event)">
<ng-template *ngFor="let imgIdx of imagens; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper" cdkDrag [cdkDragDisabled]="true">
<img [src]="imgIdx.Imagem" style="border-radius: 8px;" class="img-responsive Images">
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
<div class="row" cdkDropList #dragList="cdkDropList" cdkDropListOrientation="horizontal"
[cdkDropListData]="imagens2"
[cdkDropListConnectedTo]="[dropList]"
(cdkDropListDropped)="drop($event)">
<div class="Upcard" *ngFor="let imgIdx of imagens2" cdkDrag>
<img class="img-responsive" [src]="imgIdx.Imagem" style="width: 100%; height: 100%">
</div>
</div>
</div>
嗯，一般来说drop函数是这样的
drop(event: CdkDragDrop<string[]>)
if (event.previousContainer === event.container)
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
else
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
但这使得当您将图像从 imagens2 拖放到 imagens 时，拖动的 imagen 将添加到数组 imagens 并从数组 imagens2 中删除 - 你移动图像 -
如果你想交换两个图像，你可以简单地使用拼接。请记住，它只更改两个数组
drop(event: CdkDragDrop<string[]>)
if (event.previousContainer === event.container)
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
else
const imagen = ...(event.container.data[event.currentIndex] as any) ;
const previousImagen =
...(event.previousContainer.data[event.previousIndex] as any)
;
event.container.data.splice(event.currentIndex, 1, previousImagen);
event.previousContainer.data.splice(event.previousIndex, 1, imagen);
好吧，如果您不想“交换”两个图像，或者从滑块中删除拖动的图像，请更改功能 drop。记住 event.container.data 是你放置 imagen 的数组（在 event.currentIndex 中）， event.previousContainer.data 是你拖动 imagen 的数组（event.previousIndex 给你拖动的 imagen）
见your forked stackblitz
(*) 我认为在两个不同的数组中，我使用“克隆”您的数组
imagens2 = this.imagens.map(x => ( ...x ));
【讨论】：
天啊！！！多么棒的工作！我希望你有很多票！非常感谢您的问候！ 图像在多行时不起作用。Java 7：如何在 Java 中实现拖放？
】Java7：如何在Java中实现拖放？【英文标题】：Java7:Howtoimplementdrag&dropinJava?【发布时间】：2013-04-2515:06:25【问题描述】：我目前正在使用Java7Update21进行拖放试验。我的目标操作系统是：Windows7Ubuntu12.04MacOSX10.6/10.8要求是：将文... 查看详情
在 Gingerbread 中实现拖放
...【发布时间】：2012-02-0620:19:10【问题描述】：我需要知道如何在Android中为Gingerbread版本实现拖放。据我所知，Gingerbread默认不支持。我编码的内容：一个ViewGroup类来保存动态添加的孩子，每个孩子都应该在长按后能够通过手指点... 查看详情
拖放异步数据获取
...时间】：2017-12-2301:02:40【问题描述】：我正在尝试在共享图像的应用程序中实现拖放。我所有的图像都是高性能缩略图（即小尺寸），所以我不能将它们用作我的UIDragItem，至少不能用作最终图像。我正在寻找一种为我的原始图... 查看详情
如何在 SwiftUI (macOS) 中拖放未捆绑的图像
】如何在SwiftUI(macOS)中拖放未捆绑的图像【英文标题】：HowtodraganddropimagesnotinbundleinSwiftUI(macOS)【发布时间】：2020-05-0923:38:14【问题描述】：我正在尝试在macOS上的SwiftUI中实现拖放，我可以在其中以编程方式生成图像并将它们作为... 查看详情
在 NSTableView 中实现拖放
】在NSTableView中实现拖放【英文标题】：ImplementingdraganddropinNSTableView【发布时间】：2011-08-2206:29:32【问题描述】：谁能帮我？我在下面使用了这段代码，但这些方法在执行期间没有被调用。-(BOOL)tableView:(NSTableView*)tvwriteRowsWithIndexe... 查看详情
拖放对象并将其返回到原始位置
...布时间】：2011-08-0310:10:44【问题描述】：我正在尝试拖动图像并在释放后让它返回到原来的位置。到目前为止，我可以通过使用以下代码将图像创建为按钮来拖动图像：（如该问题的答案所示：BasicDragandDropiniOS）UIButton*button=[UIBu... 查看详情
一般拖放 ListBoxItems
...3-11-2500:19:28【问题描述】：我想在数据绑定的多个列表框上实现拖放操作-使用MVVM模式。我不是试图在列表框之间拖放，而是希望用户能够在每个列表框中拖放列表框项，以便他们可以重新排列排序顺序。我在SO上发现这篇文章... 查看详情
地图工具包中的拖放注释未按预期工作
...时间】：2015-08-0507:48:30【问题描述】：我正在尝试在地图上实现拖放注释。最初，引脚被放置在用户的当前位置，我使用[self.mapViewsetShowsUserLocation:YES];进行操作，但是当我拖放引脚时，它会在一段时间后返回到当前位置。代码如... 查看详情
如何在不改变其位置的情况下在界面生成器中将子视图置于前面
】如何在不改变其位置的情况下在界面生成器中将子视图置于前面【英文标题】：Howtobringsubviewtofrontininterfacebuilderwithoutchangingitsposition【发布时间】：2019-01-0307:04:37【问题描述】：我想问一个简单的问题，如何在不通过拖放更改... 查看详情
CDK 拖放无法正确更改图像的位置
】CDK拖放无法正确更改图像的位置【英文标题】：CDKDragDropdoesnotcorrectlychangethepositionofimages【发布时间】：2020-06-2719:41:47【问题描述】：我创建了一个图片库，我打算改变它们之间的位置。为此，我使用的是拖放cdk库。我的问题... 查看详情
有没有办法在 phonegap angular js 项目中实现拖放？
】有没有办法在phonegapangularjs项目中实现拖放？【英文标题】：Isthereawaytoimplementdrag&dropinaphonegapangularjsproject?【发布时间】：2014-12-0116:27:04【问题描述】：我试过这个：https://github.com/codef0rmer/angular-dragdrop和touchpunch(http://touchpunc... 查看详情
如何使用 React Hooks 处理 React Svg 拖放
】如何使用ReactHooks处理ReactSvg拖放【英文标题】：HowtohandleReactSvgDragandDropwithReactHooks【发布时间】：2019-04-2617:41:18【问题描述】：我正在尝试在SVG形状上实现拖放。我成功地使它与使用类组件一起工作。这是代码沙箱的链接：http... 查看详情
如何在 iOS 11 中禁用 UITextView 中的拖动
】如何在iOS11中禁用UITextView中的拖动【英文标题】：HowtodisableDragginginUITextViewiniOS11【发布时间】：2018-05-1412:52:09【问题描述】：我在UITableview中使用UITextview并通过复制和链接检测进行选择。拖放工作无需在UITextview上实现拖放功... 查看详情
如何在 GMSMapView 上实现 GMSMarker 拖放？
】如何在GMSMapView上实现GMSMarker拖放？【英文标题】：HowtoimplementGMSMarkerdragdroponGMSMapView?【发布时间】：2014-04-1305:23:07【问题描述】：我在谷歌地图上设置了标记，但是当我拖动时，所有地图都被拖动了。我想要在单击并拖动标记... 查看详情
如何在reactjs中的div之间拖放？
】如何在reactjs中的div之间拖放？【英文标题】：Howtodraganddropinbetweendivsinreactjs?【发布时间】：2022-01-2023:16:15【问题描述】：我尝试使用香草HTML/jsAPI在reactjs中实现拖放功能。我几乎完成了它，但我不能将它放在现有的divs之间。... 查看详情
在我的 .NET Windows 窗体上实现从 Chrome 拖放
】在我的.NETWindows窗体上实现从Chrome拖放【英文标题】：Implementingdrag-dropfromChromeonmy.NETWindowsform【发布时间】：2011-09-0119:50:05【问题描述】：GoogleChrome有一个方便的功能，我可以单击下载链接并将其拖到Windows资源管理器窗口中，... 查看详情
如何使可拖动元素在拖放时保持在新位置（HTML5 不是 jQuery）？
】如何使可拖动元素在拖放时保持在新位置（HTML5不是jQuery）？【英文标题】：Howtomakeadraggableelementstayatthenewpositionwhendropped(HTML5notjQuery)?【发布时间】：2019-12-1712:30:40【问题描述】：我刚刚学习了HTML5可拖放API的基础知识。我不知... 查看详情
如何在不改变其内容位置的情况下弹出整个 Div
】如何在不改变其内容位置的情况下弹出整个Div【英文标题】：HowToPopupwholeDivwithoutchangingitscontentposition【发布时间】：2016-08-2517:18:03【问题描述】：我想弹出包含图像、div等的整个div。但问题是，当我弹出div时，div内的位置发生... 查看详情