Angular 拖动以在页面上移动组件？

我正在定义一个弹出对话框组件，它允许用户输入一些数据以放置在页面上。最终的结果是，当点击屏幕上的按钮时，它就会出现，并且能够在页面上拖动

我还没有很多这个组件，下面是它的代码：

//edit-global-names-dialog-box.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'edit-global-names-dialog-box',
    templateUrl: './edit-global-names-dialog-box.component.html',
    styleUrls: ['./edit-global-names-dialog-box.component.css']
})
export class EditGlobalNamesDialogBoxComponent implements OnInit{

    constructor() {}

    ngOnInit() {
    }
}

//edit-global-names-dialog-box.component.html

<div id="dialog-box-container">
    <div id="header">

    </div>
    <div id="content">

    </div>
    <div id="footer">

    </div>
</div>

//edit-global-names-dialog-box.component.css

#dialog-box-container {
    height: 12%;
    width: 25%;
    z-index: 2 !important;
    position: absolute;
    background-color: lightgrey;
    right: 50%;
    bottom: 50%;
    transform: translate(45%,-50.1%);
    -moz-box-shadow: 8px 8px 8px #d9d9d9;
    -webkit-box-shadow: 8px 8px 8px #d9d9d9;
    box-shadow: 8px 8px 8px #d9d9d9; 
}

#header {
    border: 0.5px solid dimgrey;
    border-bottom: none;
    height: 20%;
}

#content {
    border: 0.5px solid dimgrey;
    border-bottom: none;
    height: 50%;
}

#footer {
    border: 0.5px solid dimgrey;
    height: 26%;
}

//编辑-global-names-dialog-box.component.ts
从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“编辑全局名称对话框”，
templateUrl:'。/编辑全局名称对话框.component.html'，
样式URL:['./编辑全局名称对话框.component.css']
})
导出类EditGlobalNamesDialogBoxComponent实现OnInit{
构造函数（）{}
恩戈尼尼特（）{
}
}
//编辑-global-names-dialog-box.component.html
//编辑-global-names-dialog-box.component.css
#对话框容器{
身高：12%；
宽度：25%；
z指数：2！重要；
位置：绝对位置；
背景颜色：浅灰色；
右：50%；
底部：50%；
转化：翻译（45%，-50.1%）；
-moz盒阴影：8px 8px 8px#d9d9d9；
-网络工具包盒阴影：8px 8px 8px#d9d9d9；
盒影：8px 8px 8px#d9d9d9；
}
#标题{
边框：0.5px实心灰色；
边框底部：无；
身高：20%；
}
#内容{
边框：0.5px实心灰色；
边框底部：无；
身高：50%；
}
#页脚{
边框：0.5px实心灰色；
身高：26%；
}

您可以看到，它目前只是一个模板，一个出现在所有其他页面内容上的div，有一个阴影，位于页面的中心

我现在想要实现的功能是，当用户单击并拖动对话框的

标题

div时，整个对话框将在页面上移动

我看了一下之前发布的几个问题： 这些建议使用纯javascript或JQuery的方式来做一些我不确定是否能与angular很好地匹配的事情

---

如何使我的组件能够在页面上拖动？

好的，下面是一个承诺使用Javascript的可拖动弹出窗口示例。请注意，我也在使用JQuery来简化这一过程，但使用的所有函数基本上都是“常规”Javascript函数的包装器，因此可以很容易地将其转换为“常规”Javascript，我就是不介意。：）

如果您在div中创建id为“myPopup”的内容，并将“myPopup”id更改为您想要的任何内容，那么您几乎可以复制粘贴它，前提是您有jquery可用。Ofc有很多改进的方法，但这应该让你开始

函数displayPopup（）{
$（“#myPopup”）.toggleClass（“popupVisible”）；
}
$（文档）.ready（函数（）{
var IsDraging=错误；
$（“我的弹出窗口”）
.mousedown（函数（）{
IsDraging=错误；
$（“#myPopup”）.addClass（“单击”）
})
.mousemove（函数（）{
IsDraging=true；
if（$（“#myPopup”）.hasClass（“单击”））{
$（#myPopup”）.css（“左”，event.pageX-20）；
$（“#myPopup”）.css（“top”，event.pageY-20）；
}
})
.mouseup（函数（）{
var WasDraging=IsDraging；
IsDraging=错误；
如果（！正在拖动）{
}
$（“#myPopup”）.removeClass（“单击”）
});
});

#我的弹出窗口{
位置：绝对位置；
宽度：5厘米；
身高：5厘米；
背景：#00ff00；
顶部：钙（50%-2.5cm）；
左：钙（50%-2.5cm）；
显示：无；
}
.popupVisible{
显示：块！重要；
}
因此，另一个答案是javascript/Jquery的一个很好的解决方案，但我已经设法以一种更具角度性的方式实现了这一点，没有Jquery。这是：

//edit-global-names-dialog-box.component.html

<div id="dialog-box-container">
    <div id="header"
        (mousedown)="mousedown($event)" 
        (mousemove)="mousemove($event)" 
        (mouseup)="mouseup($event)"
    >
        <div id="title-div">
            <h5 id="title">Edit Global Name</h5>
        </div>
    </div>
    <div id="content">
        <div id="label-area">

        </div>
            <input type="text" id="text-box">
    </div>
    <div id="footer">
        <div id="ok-button-div">
            <button type="button" id="ok-button">OK</button>
        </div>
        <div id="cancel-button-div">
            <button type="button" id="cancel-button">Cancel</button>
        </div>
    </div>
</div>

虽然有点紧张，但效果很好。如果有人有任何可以改进的地方，请告诉我。
一种解决方案是使用Javascript抓取onmousemove事件，然后将弹出div设置为鼠标位置。它既复杂又简单，如果你想让我给你看一个例子，我可能需要几分钟的时间来给你讲。@SimonHyll如果你能给出一个例子作为答案，那就太好了。我能在angular类中使用这些函数吗？我想让这个班成为移动方面的专家我真的不知道，我以前没用过，对不起。但是您应该能够从上述代码中获取理论，并通过谷歌搜索angular中的函数（例如谷歌“how do i grab move event in angular”）将其相当容易地转换为angular代码。否则，我建议不要使用角度，这没有什么理由，如果你缺乏力量，我建议创建一个CordoVa+人行横道项目，它给你接近无穷的力量，你使用JavaScript更容易得到帮助。不幸的是，我太远了，我的产品除了考虑角度以外的其他时间点。我将尝试翻译你的代码，并用结果编辑我的OP。因此，我无法在typescript上使用它。我发现错误
属性“pageX”在类型“Event”上不存在。
在类型脚本中是Event.clientX和Event.clientyPixi是什么？没有它我们能做吗？
//edit-global-names-dialog-box.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'edit-global-names-dialog-box',
    templateUrl: './edit-global-names-dialog-box.component.html',
    styleUrls: ['./edit-global-names-dialog-box.component.css']
})
export class EditGlobalNamesDialogBoxComponent implements OnInit{

    private mousePosition : PIXI.Point;
    private dragOffset;
    private isDown;
    private dialogBoxDiv;

    constructor() {
        this.mousePosition = new PIXI.Point();
        this.isDown = false;
        this.dragOffset = [0, 0];
    }

    ngOnInit() {
        this.dialogBoxDiv = document.getElementById('dialog-box-container');
    }

    mousedown($event){
        this.isDown = true;
        this.dragOffset = [ 
            this.dialogBoxDiv.offsetLeft - $event.clientX,
            this.dialogBoxDiv.offsetTop - $event.clientY
        ]
    }

    mouseup($event){
        this.isDown = false;
    }

    mousemove($event){
        $event.preventDefault();

        if (this.isDown){
             var mousePosition = {
                 x : $event.clientX,
                 y : $event.clientY
             };

             this.dialogBoxDiv.style.left = (mousePosition.x + this.dragOffset[0]) + 'px';
             this.dialogBoxDiv.style.top  = (mousePosition.y + this.dragOffset[1]) + 'px';
        }
    }
}