我已经设法让拖放工作只能从一侧下降到另一侧,但是排序被取消了。我希望能够在一侧(目标侧)而不是另一侧(源侧)继续排序。
此外,我希望在被丢弃时用不同的模板替换 HTMLElement,甚至更好:同时被丢弃。
我发现文档缺乏明确的用例,并且很想看看如何做到这一点,以及我应该使用什么。
到目前为止,这是我的代码:
import {Component} from "@angular/core";
import {DragulaService} from "ng2-dragula";
import {DragAndDropHelper} from "../../../helpers/DragAndDropHelper";
@Component({
selector: 'app-segment-dropzone',
templateUrl: './segment-dropzone.component.html',
styleUrls: ['./segment-dropzone.component.scss']
})
export class SegmentDropzoneComponent {
constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('elements-bag', {
copy: true,
copySortSource: true,
accepts: function (el, target, source, sibling) {
return target.id === 'elements-dropzone';
},
});
dragulaService.drag.subscribe((value) => {
this.getElementView(DragAndDropHelper.getElementIdFromDraggedItem(value[1]));
});
}
public getElementView(elementId: string) {
console.log(elementId);
}
}
target html
<div class="row">
<div class="col-lg-12">
<ul [dragula]='"elements-bag"' id="elements-dropzone">
<li>first item</li>
<li>second item</li>
</ul>
</div>
</div>
source html
<div class="mt-list-container list-simple">
<ul [dragula]='"elements-bag"' id="elements-list">
<li class="mt-list-item" *ngFor="let element of elements" [attr.data-element-id]="element.id" >
<div class="list-icon-container done">
<i class="icon-check"></i>
</div>
<div class="list-datetime">{{ element.type }}</div>
<div class="list-item-content">
<h3 class="">{{ element.name }}</h3>
</div>
</li>
</ul>
</div>
简而言之目标:
- 仅从右侧拖放到左侧:完成,使用
accept
属性完成。 - 仅允许在左侧(目标侧,
id="elements-dropzone"
)排序。不在右边! - 在拖放时更改元素模板。
很想看到这方面的任何指示。非常感谢。