Question

问候全部

项目背景

我们在基于Angular2项目的HTML5类型脚本中遇到拖放问题但是这个问题可能是由于DOM操作问题造成的。在我们的Web应用程序中，我们有一个页面，其中需要重新排序组件组并在设计器中的组之间进行切换。

这个'设计师'输出HTML的结构如下：

<div>
    <div class="col1">
        <div class="group1"></div>
        <div class="group2"></div>
    </div>
    <div class="col2">
        <div class="group3"></div>
        <div class="group4"></div>
    </div>
</div>

每个“组”定义了一个处理共享dragGroup状态的dragstart，dragover和dragend。

细化代码

public DragStart(source: Group): void
{
    this.dragGroup = source;
}

public DragOver(source: Group): void
{
    // Reorders the groups appropriately
    // Changes the state of the model, such that angular2 will render the DOM differently
}

public DragEnd(): void
{
    this.dragGroup = null;
}

问题

我们已经将问题范围缩小到从拖出的组中移除DOM并将最重要的位移到另一个组中。

何时触发拖动结束的示例：交换group1和group2

拖动结束不 时的示例：将group1移入col2

查询

为什么第一个示例工作/为什么同一组中的重新排序有效？
是否有“最佳实践”方式我可以改变工作流程以获得我想要的结果？
或者是否有一个可以用来模拟丢失的dragend的厚颜无耻的黑客？

提前谢谢你。如果需要更多信息，请询问。

Answer 1

好，

我找到了一个可怕的＆＃39;解决自己。一旦有人有更好的解决方案，我会接受他们的回答。

在最外面的div（包含所有列的div）上，我注册了3个事件来帮助确定拖动过程中鼠标的状态：mousemove, mousedown and mouseup。

以下Angular2模板HTML说明了该解决方案。在普通的HTML中，它不会包含事件周围的括号，而且会有＆＃39; on＆＃39;以每个事件名称为前缀。

<div (mousemove)="CheckIfDragEnded()"
     (mousedown)="SetMouseDown(true)"
     (mouseup)="SetMouseDown(false)">
    <div class="col1">
        <div class="group1"></div>
        <div class="group2"></div>
    </div>
    <div class="col2">
        <div class="group3"></div>
        <div class="group4"></div>
    </div>
</div>

以下是TypeScript（再次，这可以很容易用JavaScript编写）

// Some storage state variable
private mouseDown: boolean = false;

private SetMouseDown(down: boolean): void
{
    this.mouseDown = down;
}

private CheckIfDragEnded(): void
{
    if (this.mouseDown)
    {
        // Call the drag end method here that should have been triggered by the drag end normally
    }
}

一个小小的补充就是检查鼠标按钮是否也是左键单击。

如何在删除源DOM元素时模拟ondragend？

1 个答案: