- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找支持多重拖放的拖放库。但我找不到任何 Angular 2+。 ng2-dragula 支持我们想要的,除了多次拖放。任何人都可以建议任何图书馆或如何覆盖 ng2 dragula 来实现同样的目标。 以下是我们正在寻找的功能:
最佳答案
基于 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 但没有按预期工作,一旦我找到纯 Angular 代码就会更新):
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');
}
});
您需要在 .ts
文件上声明 import $ from 'jquery';
并安装 @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()
函数(related explanation)。
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);
}
});
关于Angular 多重拖放 (ng2-dragula),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48745177/
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。 我不明白静态属性之间的区别: p
当元素被拖放时,有没有办法从被拖动的元素中获取 id(或其他属性值)? 例如,在左侧,我有一堆 div,我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
每当我更改其中一个类属性时,我想设置一个修改标志,如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
由于某种原因,我下面的代码曾经可以正常工作,但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
为什么将 ; 放在最佳实践中?在函数定义的末尾。 例如 var tony = function () { console.log("hello there"); }; 优于: var tony
我在容器内有一个位图。当我拖动容器时,光标变为编辑文本形状,图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。 这是我的代码,所以你可以看到我有 RTFM: function createIc
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。 当我让 Visual Studio 20
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。 我在一本书上找到这样声
我正在设置多个方法,想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。 主要方法: public static void Main(string[] args) { i
我正在尝试使用 crontab 编写一个简单的任务,将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
有人可以告诉我如何使用这个解决方案来解决我的问题吗?我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表,我希望用户能够通过拖放对列表进行重新排序。此外,我希望有第二个列表,用户可以将第一个列表中的项目拖到其中。 到
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true,但是当我拖动弹出面板并将其放到新位置时,它
所以,基于this answer ,我有一组可以拖放并卡入到位的 div。唯一的问题是,可拖动的 div 具有不同的高度,我需要它们始终捕捉到目标的底部,而不是顶部。 您可以在this JsFiddl
我是一名优秀的程序员,十分优秀!