[英]Dragula drag and drop one way with copy ng2
我正在嘗試使用ng2 dragula拖放復制的一種方法,這是我的模板。
`<div>
<div class='wrapper'>
<div class='container' id='no-drop' [dragula]='"first-bag"'>
<div>Drag/drop item 1</div>
</div>
<div class='container' [dragula]='"first-bag"'>
<div>Drag/drop item 2</div>
</div>
</div>
</div>`
我已設置要復制到組件中的選項。
constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('first-bag', {
copy: true
});
但是,如果我將移動設置為false,則根本無法拖動。 我如何才能從左向右移動,而不是相反。
發布后不久我找到了答案!!
constructor(private dragulaService: DragulaService) {
dragulaService.setOptions('first-bag', {
copy: true,
moves: function (el, container, handle) {
return container.id !== 'no-drop';
}
});
默認情況下,dragula將允許用戶將元素拖動到任何容器中,並將其拖放到列表中的任何其他容器中。 如果將元素放置在不是容器之一的任何位置,則將根據revertOnSpill和removeOnSpill選項優雅地取消該事件。
下面的示例允許用戶從左向右拖動元素,並從右向左拖動元素。 在HomePage.component.html中創建代碼
<div class="wrapper"> <div class="container master" [dragula]="'editor-bag'" [dragulaModel]="q1">
<div *ngFor="let item of q1" class="box">
{{item}}
</div>
</div>
<div class="container" [dragula]="'editor-bag'">
</div>
接下來,創建HomePageComponent.ts。 另外,需要設置具有以下簽名的accepts方法:(el,target,source,sibling)
import { DragulaService, DragulaDirective } from 'ng2-dragula/ng2-dragula';
import { Router, Route, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css'],
})
export class HomePageComponent implements OnInit {
q1 = [];
q2 = [];
static _debug: boolean = false;
_debug: boolean = HomePageComponent._debug;
constructor(private dragulaService: DragulaService, private router: Router, private route: ActivatedRoute) {
for (var i = 0; i < 10; i++) {
this.q1.push("1. <" + i + ">");
//this.q2.push("2. <" + i + ">");
}
dragulaService.setOptions('editor-bag', {
accepts: function (el, target, source, sibling) {
var fn_debug = true;
var acceptAll = false;
if (this._debug || fn_debug) {
console.log("accepts() start el, target, source, sibling");
console.log({ el, target, source, sibling });
}
if (target.classList.contains('master')) {
return false;
}
if (sibling == null) {
return (target.children.length == 0);
}
var name: string = el.innerText;
return false;
},
direction: 'vertical', // Y axis is considered when determining where an element would be dropped
copy: function (el, source) {
if (this._debug) {
console.log("copy() start");
console.log(el);
console.log(source);
console.log("copy() stop");
}
return source.classList.contains('master');
}, // elements are moved by default, not copied
copySortSource: false, // elements in copy-source containers can be reordered
revertOnSpill: false, // spilling will put the element back where it was dragged from, if this is true
removeOnSpill: true, // spilling will `.remove` the element, if this is true
mirrorContainer: document.body, // set the element that gets mirror elements appended
ignoreInputTextSelection: true // allows users to select input text, see details below
})
}
ngOnInit() {
this.dragulaService.drag.subscribe((value: any) => {
if (this._debug) {
console.log("drag start");
console.log(value);
console.log("drag stop");
console.log(`drag: ${value[0]}`);
}
// this.onDrag(value.slice(1));
});
this.dragulaService.drop.subscribe((value: any) => {
console.log(`drop: ${value[0]}`);
//this.onDrop(value.slice(1));
});
this.dragulaService.over.subscribe((value: any) => {
if (this._debug) { console.log(`over: ${value[0]}`); }
// this.onOver(value.slice(1));
});
this.dragulaService.out.subscribe((value: any) => {
if (this._debug) { console.log(`out: ${value[0]}`); }
//this.onOut(value.slice(1));
});
}
}
我正在發布我的解決方案,因為它可能也會對某人有所幫助。
我更喜歡使用accepts函數而不是moves函數。
因為使用移動功能,您可以停止從容器中移動物品。 接受函數決定目標容器是否有效。
accepts: function (el, target, source, sibling) {
// your condition
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.