我正在寻找支持多次拖动的拖放库。但我找不到任何角度2+。 ng2-dragula支持我们想要的,除了多次拖放。可以任何人建议任何库或如何覆盖ng2 dragula实现相同。 以下是我们正在寻找的功能:
答案 0 :(得分:1)
基于this comment上的github bevacqua/dragula
issue: Drag and drop multiple items #50。
我已经进行了一些改进,可以通过选中的项目https://jsfiddle.net/twfcd5hx/1/
进行多个项目的拖放。在ng2-dragula上:https://stackblitz.com/edit/ng2-dragula-base-i41w6c?file=src/app/app.component.ts
相关代码(请注意,I've tried using the pure angular way不能正常工作,一旦我找到了纯角度的代码,它将更新):
this.dragulaService.cloned("dnd").subscribe(({ clone, original, cloneType }) => {
this.mirrorContainer = $('.gu-mirror').first();
this.mirrorContainer.removeClass('ex-over');
this.selectedItems = $('.ex-over');
this.hasMultiple = this.selectedItems.length > 1 || (this.selectedItems.length == 1 && !$(original).hasClass('ex-over'));
if (this.hasMultiple) {
$('.gu-transit').addClass('ex-over');
this.selectedItems = $('.ex-over');
this.mirrorContainer.empty();
var height = 0,
width = 0;
let temp = this.mirrorContainer;
this.selectedItems.each(function (index) {
var item = $(this);
var mirror = item.clone(true);
mirror.removeClass('ex-over gu-transit');
temp.append(mirror);
temp.css('background-color', 'transparent');
item.addClass('gu-transit');
var rect = item[0].getBoundingClientRect();
height += rect.height;
width = rect.width;
});
this.mirrorContainer = temp;
this.mirrorContainer.css('height', height + 'px');
}
});
您需要在import $ from 'jquery';
文件中声明.ts
并安装@types/jquery
,jquery
说明:
this.mirrorContainer = $('.gu-mirror').first();
抓取dragula
默认创建的镜像容器
this.mirrorContainer.removeClass('ex-over');
多选项目将具有此类,但我们不希望它出现在镜子中的
this.selectedItems = $('.ex-over');
获取多选项目
this.hasMultiple = this.selectedItems.length > 1 || (this.selectedItems.length == 1 && !$(original).hasClass('ex-over'));
检查是否选中了多个项目,并考虑了它们从未选择的项目开始拖动的位置
if (this.hasMultiple) { // we have multiple items selected
$('.gu-transit').addClass('ex-over'); // edge case: if they started dragging from an unselected item, adds the selected item class
this.selectedItems = $('.ex-over'); // update list of selected items in case of edge case above
this.mirrorContainer.empty(); // clear the mirror container, we're going to fill it with clones of our items
var height = 0,
width = 0; // will track final dimensions of the mirror container
let temp = this.mirrorContainer; // used to temporary store this.mirrorContainer since otherwise would return undefined
this.selectedItems.each(function (index) { // clone the selected items into the mirror container
var item = $(this); // the item
var mirror = item.clone(true); // clone the item
mirror.removeClass('ex-over gu-transit'); // remove the state classes if necessary
temp.append(mirror); //add the clone to mirror container
temp.css('background-color', 'transparent');
item.addClass('gu-transit'); //add drag state class to item
var rect = item[0].getBoundingClientRect(); // update the dimensions for the mirror container
height += rect.height;
width = rect.width;
});
this.mirrorContainer = temp; // restore this.mirrorContainer value after updated
this.mirrorContainer.css('height', height + 'px'); //set final height of mirror container
}
请注意,在以下代码中,我使用el.remove()
删除了存储到目标元素的拖动元素,因为我已经完成了moveback()
和moveto()
函数({{3} }。
this.dragulaService.drop("dnd")
.subscribe(({ name, el, target, source, sibling }) => {
if (source.attributes[2].value === "data" && (target.attributes[3].value === "ct" || target.attributes[2].value === "target")) {
if (this.target.length > 0) {
this.placeholdertarget = false;
}
if (this.data.length < 1) {
this.placeholderdata = true;
}
if (!this.hasMultiple) {
let target = document.getElementsByClassName('target');
for (let i = target.length - 1; i >= 0; i--) {
if (target[i].className.includes('ex-over') && i >= 0) {
this.removeClass(target[i], 'ex-over');
}
}
} else {
el.remove();
this.moveto();
}
for (let i = 0; i < this.target.length; i++) {
this.target[i].state = false;
}
this.challtarget = false;
} else if (source.attributes[2].value === "target" && (target.attributes[3].value === "cd" || target.attributes[2].value === "data")) {
if (this.target.length < 1) {
this.placeholdertarget = true;
}
if (this.data.length > 0) {
this.placeholderdata = false;
}
if (!this.hasMultiple) {
let target = document.getElementsByClassName('data');
for (let i = target.length - 1; i >= 0; i--) {
if (target[i].className.includes('ex-over') && i >= 0) {
this.removeClass(target[i], 'ex-over');
}
}
} else {
el.remove();
this.moveback();
}
for (let i = 0; i < this.data.length; i++) {
this.data[i].state = false;
}
this.challdata = false;
} else {
// console.log('spilled');
// this.dragulaService.find('dnd').drake.cancel(true);
}
});